1

ユーザーが製品の色をクリックすると、製品の前の画像がフェードアウトし、新しい製品がフェードアウトする電子商取引の機能に取り組んでいます。クロスフェード効果を達成しようとしていますが、ちらつき効果があります私が望んでいないところに、dom から古いイメージを削除しているときに来ると思います。

http://jsfiddle.net/L9Z5G/

4

5 に答える 5

1

これがあなたが探していたものであることを願っています：デモ

$('.colours').click(function() {
  if ($('#' + $(this).html().toLowerCase()).attr('class') == 'active') { return; }

  var active = $('.active');
  var next = $('#' + $(this).html().toLowerCase());

  active.fadeOut(500, function() {
    $(this).toggleClass('active');
  });
  next.fadeIn(500, function() {
    $(this).toggleClass('active');
  });
});​
于 2012-07-26T11:33:19.587 に答える
1

.hide（）と.show（）を使用して、それらをクロスフェードさせるのは簡単ではありませんか？

于 2012-07-26T10:57:49.603 に答える
1

クリック イベントをバインドするには、ここで click() を使用します。

$('#color1').click(function(){
      $('#image1').fadeOut('fast');
});
于 2012-07-26T11:00:06.843 に答える
1

これを試してください:作業デモ http://jsfiddle.net/djMZe/1/ または http://jsfiddle.net/R7u8G/1/

ニーズに合うことを願っています！:)

コード

$("#colours li").click(function() {
    $(".large-image:first-child:not(.new)").animate({
        opacity: 0
    }, 500);
    var img = $("<img />").attr('src', $(this).data("alternative")).attr("class", "large-image new");
    img.css({
        opacity: 0
    })
    $(".zoom-image").append(img);
    //img.animate({ opacity    :    1}, 500);
    img.css({
        "opacity": "1"
    }).fadeIn("slow");
    $(".large-image:not(:last-child)").remove();

});​
于 2012-07-26T11:00:39.400 に答える
1

このDEMOを参照してください。この効果が必要だったことを願っています。

編集済み： 更新されたフィドル

jQuery サイクル プラグイン

$('#slideshow').before('<ul id="nav">').cycle({
    fx: 'fade',
    speed: 'fast',
    timeout: 0,
    pager: '#nav',

    // callback fn that creates a thumbnail to use as pager anchor 
    pagerAnchorBuilder: function(idx, slide) {
        return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>';
    }
});​

リファレンスを見る

于 2012-07-26T11:14:15.767 に答える