web-dev-qa-db-ja.com

JQueryのaddClass / removeClass関数をアニメーション化する方法は？

JQueryのaddClass/removeClass関数をアニメーション化する方法を知りたいですか？

アニメーション関数の場合、いくつかのCSSプロパティを配置する必要があるようですが、クリック関数をトリガーするたびに要素をブロックとして表示し、すべての要素をCSSで非表示にするクラスがある場合はどうでしょうか。このプロセスをアニメーション化するにはどうすればよいですか？

これが私のコードです：

<script src="js/jquery-1.9.1.min.js"></script>
<script>

    var allSlides = $('li');

    $('#nextSlide').click(function(){
        var nextSlide = $('.active').next();
        if (nextSlide.length == 0)
        {
            var nextSlide = allSlides.first();
        }
        $('.active').removeClass('active');
        nextSlide.addClass('active');
        return false;
    });

    $('#prevSlide').click(function(){
        var prevSlide = $('.active').prev();
        if (prevSlide.length == 0)
        {
            var prevSlide = allSlides.last();
        }
        $('.active').removeClass('active');
        prevSlide.addClass('active');
        return false;
    });

</script>
jqueryjquery-animateaddclassremoveclass
7
CairoCoder

CSS3遷移プロパティは、jQueryで操作されている要素に適用できます。ベンダープレフィックスを使用した例を次に示します。

element {
    -webkit-transition: all 2s; // Chrome
    -moz-transition: all 2s; // Mozilla
    -o-transition: all 2s; // Opera
    transition: all 2s;
}
14
aNewStart847

JQueryUIを使用している場合は、$。toggleClass（）;を使用できます。関数。

http://api.jqueryui.com/toggleClass/

2
Derek

JQuery 。fadeIn（） を使用するか、CSS3トランジションを使用できます。

#nextSlide, #prevSlide {
  display: none;
  -webkit-transition: display .5s ease;
  -moz-transition: display .5s ease;
  -o-transition: display .5s ease;
}
.active {
  transition: display .5s ease;
  -webkit-transition: display .5s ease;
  -moz-transition: display .5s ease;
  -o-transition: display .5s ease;
}

それはあなたのために働くはずです。トランジションスタイルのdisplayを置き換えることで、他のトランジションを追加できます。

1
johnkoht

あなたは間違いなくjqueryでクラスを追加/削除するためにアニメーション化することができます。以下のフォーマットを確認してください

.removeClass( className [, duration ] [, easing ] [, complete ] )

以下のサンプルコード

$( "div" ).click(function() {
   $( this ).removeClass( "big-blue", 1000, "easeInBack" );
});

参照リンク

注：ただし、jquery-uiを追加する必要があります.jsファイルを機能させる。

<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

これがお役に立てば幸いです。ありがとう

0
Ibnul Hasan