在更改类时，流体转换为淡入淡出

时间：2015-08-04 17:47:29

标签： javascript jquery html css

我认为在CSS中这样做可能会更好但不是100％肯定所以如果有人知道并且可以提供解决方案会很棒，但是对于我使用的jQuery方法。它会使图像消失，但是当它加载时，新的图像似乎不会消失。

有人有什么想法吗？

$("#product_color_select li").on("click", function() {
  var select_product_id = $(this).attr('data-value');
  sd_refresh_product_form_update(select_product_id);
});

var product_color_select_first = $("#product_color_select li:first-child").attr('data-larger');
$("#larger-colour").fadeIn("slow", function() {
  $('#larger-colour').addClass(product_color_select_first);
});

$("#product_color_select li").on("mouseover", function() {
  var select_product_swatch = $(this).attr('data-larger');
  $("#larger-colour").fadeOut("slow", function() {
    $('#larger-colour').removeClass();
  });
  $("#larger-colour").fadeIn("slow", function() {
    $('#larger-colour').addClass(select_product_swatch);
  });
});
#product_color_select {
  width: 76%;
  float: left;
}
#product_color_select li {
  display: inline-block;
  width: 30px;
  height: 25px;
  text-indent: -999999em;
  cursor: pointer;
  margin: 0 2px 5px 0;
}
#larger-colour {
  float: right;
  max-width: 86px;
  width: 86px;
  height: 62px;
}
/* interior colours */

#product_color_select li.eco-weave,
#larger-colour.eco-weave {
  background-image: url('http://2015.ambientlounge.com/design/themes/ambientlounge/media/images/swatches/mini/eco-weave.png');
}
#product_color_select li.aubergine-dream,
#larger-colour.aubergine-dream {
  background-image: url('http://2015.ambientlounge.com/design/themes/ambientlounge/media/images/swatches/mini/aubergine-dream.png');
}
#product_color_select li.lime-citrus,
#larger-colour.lime-citrus {
  background-image: url('http://2015.ambientlounge.com/design/themes/ambientlounge/media/images/swatches/mini/lime-citrus.png');
}
#product_color_select li.blue-jazz,
#larger-colour.blue-jazz {
  background-image: url('http://2015.ambientlounge.com/design/themes/ambientlounge/media/images/swatches/mini/blue-jazz.png');
}
#product_color_select li.sakura-pink,
#larger-colour.sakura-pink {
  background-image: url('http://2015.ambientlounge.com/design/themes/ambientlounge/media/images/swatches/mini/sakura-pink.png');
}
#product_color_select li.hot-chocolate,
#larger-colour.hot-chocolate {
  background-image: url('http://2015.ambientlounge.com/design/themes/ambientlounge/media/images/swatches/mini/hot-chocolate.png');
}
#product_color_select li.tundra-spring,
#larger-colour.tundra-spring {
  background-image: url('http://2015.ambientlounge.com/design/themes/ambientlounge/media/images/swatches/mini/tundra-spring.png');
}
#product_color_select li.black-sapphire,
#larger-colour.black-sapphire {
  background-image: url('http://2015.ambientlounge.com/design/themes/ambientlounge/media/images/swatches/mini/black-sapphire.png');
}
#product_color_select li.luscious-grey,
#larger-colour.luscious-grey {
  background-image: url('http://2015.ambientlounge.com/design/themes/ambientlounge/media/images/swatches/mini/luscious-grey.png');
}
#product_color_select li.wildberry-deluxe,
#larger-colour.wildberry-deluxe {
  background-image: url('http://2015.ambientlounge.com/design/themes/ambientlounge/media/images/swatches/mini/wildberry-deluxe.png');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="fabric-select" id="product_color_select">
  <li class=" aubergine-dream" data-value="745" data-larger="aubergine-dream" title="Aubergine Dream">Aubergine Dream</li>
  <li class=" black-sapphire" data-value="746" data-larger="black-sapphire" title="Black Sapphire">Black Sapphire</li>
  <li class=" wildberry-deluxe" data-value="727" data-larger="wildberry-deluxe" title="Wildberry Deluxe">Wildberry Deluxe</li>
  <li class=" tundra-spring" data-value="747" data-larger="tundra-spring" title="Tundra Spring">Tundra Spring</li>
  <li class="selected luscious-grey" data-value="744" data-larger="luscious-grey" title="Luscious Grey">Luscious Grey</li>
  <li class=" sakura-pink" data-value="743" data-larger="sakura-pink" title="Sakura Pink">Sakura Pink</li>
  <li class=" lime-citrus" data-value="748" data-larger="lime-citrus" title="Lime Citrus">Lime Citrus</li>
  <li class=" eco-weave" data-value="742" data-larger="eco-weave" title="Eco Weave">Eco Weave</li>
  <li class=" blue-jazz" data-value="749" data-larger="blue-jazz" title="Blue Jazz">Blue Jazz</li>
  <li class=" hot-chocolate" data-value="741" data-larger="hot-chocolate" title="Hot Chocolate">Hot Chocolate</li>
</ul>

<div id="larger-colour" class="aubergine-dream" style="display: block;"></div>

2 个答案:

答案 0 :(得分：2)

你正在做的方式，它是在fadeIn动画结束后添加背景图片。这就是它突然出现的原因。你想在淡入它之前设置背景。

$("#product_color_select li").on("click", function() {
  var select_product_id = $(this).attr('data-value');
  sd_refresh_product_form_update(select_product_id);
});

var product_color_select_first = $("#product_color_select li:first-child").attr('data-larger');
$("#larger-colour").fadeIn("slow", function() {
  $('#larger-colour').addClass(product_color_select_first);
});

$("#product_color_select li").on("mouseover", function() {
  var select_product_swatch = $(this).attr('data-larger');
  var thumbnail = $('#larger-colour');
  thumbnail.stop();
  thumbnail.fadeOut("fast", function() {
    thumbnail.removeClass();
    thumbnail.addClass(select_product_swatch);
    thumbnail.fadeIn("slow");
  });
});
#product_color_select {
  width: 76%;
  float: left;
}
#product_color_select li {
  display: inline-block;
  width: 30px;
  height: 25px;
  text-indent: -999999em;
  cursor: pointer;
  margin: 0 2px 5px 0;
}
#larger-colour {
  float: right;
  max-width: 86px;
  width: 86px;
  height: 62px;
}
/* interior colours */

#product_color_select li.eco-weave,
#larger-colour.eco-weave {
  background-image: url('http://2015.ambientlounge.com/design/themes/ambientlounge/media/images/swatches/mini/eco-weave.png');
}
#product_color_select li.aubergine-dream,
#larger-colour.aubergine-dream {
  background-image: url('http://2015.ambientlounge.com/design/themes/ambientlounge/media/images/swatches/mini/aubergine-dream.png');
}
#product_color_select li.lime-citrus,
#larger-colour.lime-citrus {
  background-image: url('http://2015.ambientlounge.com/design/themes/ambientlounge/media/images/swatches/mini/lime-citrus.png');
}
#product_color_select li.blue-jazz,
#larger-colour.blue-jazz {
  background-image: url('http://2015.ambientlounge.com/design/themes/ambientlounge/media/images/swatches/mini/blue-jazz.png');
}
#product_color_select li.sakura-pink,
#larger-colour.sakura-pink {
  background-image: url('http://2015.ambientlounge.com/design/themes/ambientlounge/media/images/swatches/mini/sakura-pink.png');
}
#product_color_select li.hot-chocolate,
#larger-colour.hot-chocolate {
  background-image: url('http://2015.ambientlounge.com/design/themes/ambientlounge/media/images/swatches/mini/hot-chocolate.png');
}
#product_color_select li.tundra-spring,
#larger-colour.tundra-spring {
  background-image: url('http://2015.ambientlounge.com/design/themes/ambientlounge/media/images/swatches/mini/tundra-spring.png');
}
#product_color_select li.black-sapphire,
#larger-colour.black-sapphire {
  background-image: url('http://2015.ambientlounge.com/design/themes/ambientlounge/media/images/swatches/mini/black-sapphire.png');
}
#product_color_select li.luscious-grey,
#larger-colour.luscious-grey {
  background-image: url('http://2015.ambientlounge.com/design/themes/ambientlounge/media/images/swatches/mini/luscious-grey.png');
}
#product_color_select li.wildberry-deluxe,
#larger-colour.wildberry-deluxe {
  background-image: url('http://2015.ambientlounge.com/design/themes/ambientlounge/media/images/swatches/mini/wildberry-deluxe.png');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="fabric-select" id="product_color_select">
  <li class=" aubergine-dream" data-value="745" data-larger="aubergine-dream" title="Aubergine Dream">Aubergine Dream</li>
  <li class=" black-sapphire" data-value="746" data-larger="black-sapphire" title="Black Sapphire">Black Sapphire</li>
  <li class=" wildberry-deluxe" data-value="727" data-larger="wildberry-deluxe" title="Wildberry Deluxe">Wildberry Deluxe</li>
  <li class=" tundra-spring" data-value="747" data-larger="tundra-spring" title="Tundra Spring">Tundra Spring</li>
  <li class="selected luscious-grey" data-value="744" data-larger="luscious-grey" title="Luscious Grey">Luscious Grey</li>
  <li class=" sakura-pink" data-value="743" data-larger="sakura-pink" title="Sakura Pink">Sakura Pink</li>
  <li class=" lime-citrus" data-value="748" data-larger="lime-citrus" title="Lime Citrus">Lime Citrus</li>
  <li class=" eco-weave" data-value="742" data-larger="eco-weave" title="Eco Weave">Eco Weave</li>
  <li class=" blue-jazz" data-value="749" data-larger="blue-jazz" title="Blue Jazz">Blue Jazz</li>
  <li class=" hot-chocolate" data-value="741" data-larger="hot-chocolate" title="Hot Chocolate">Hot Chocolate</li>
</ul>

<div id="larger-colour" class="aubergine-dream" style="display: block;"></div>

答案 1 :(得分：0)

只是想优化你的代码并按我的方式解决它......

只需替换它：

$("#product_color_select li").on("mouseover", function() {
  var select_product_swatch = $(this).attr('data-larger');
  $("#larger-colour").fadeOut("slow", function() {
    $('#larger-colour').removeClass();
  });
  $("#larger-colour").fadeIn("slow", function() {
    $('#larger-colour').addClass(select_product_swatch);
  });
});

由此：

$("#product_color_select li").on("mouseenter", function () {
    var select_product_swatch = $(this).attr('data-larger');
    $('#larger-colour').stop().fadeOut("fast", function(){
        $(this).removeClass().addClass(select_product_swatch).fadeIn("slow");
    });
});

Here is the JSFiddle demo：）

相关问题
最新问题