0

divのmargin-topの変更をアニメーション化したい。

通常、私はこれを次のようにします：

 $("#mydiv").animate({ marginTop: '+='+myvar}, 200);

ただし、これは常に値を加算 (または減算) します。値の変化を単純にアニメートする方法が必要です。

例: div が 100 のマージントップで始まり、myvar 値が 50 の場合、div をアニメーション化して 50 に縮小します。同様に、myvar 値が 200 の場合、変更をアニメーション化したいので、200 に成長します。

私はこれをある程度達成することができますが、CSS をリセットします。

$("#mydiv").css("margin-top", "0px");
$("#mydiv").animate({ marginTop: '+='+myvar}, 200);

毎回ですが、それは少し不格好になります。

これを達成するための5月を知っている人はいますか？

(PS: CSS トランジションを使用せずに)

編集：以下に私のコードを追加しました

$("#info1tab").click(function() {
  $(".textbox").slideUp('200');
  $("#info1").delay(300).slideDown('200');
  var itemheight = $("#info1").css("height");
  var itemheightint = parseInt(itemheight);
  $("#photobox").animate({ marginTop: itemheightint }, 200);

});

$("#info2tab").click(function() {
  $(".textbox").slideUp('200');
  $("#info2").delay(300).slideDown('200');
  var itemheight = $("#info2").css("height");
  var itemheightint = parseInt(itemheight);
  $("#photobox").animate({ marginTop: itemheightint }, 200);

});
4

4 に答える 4

1

何が問題なの$('#mydiv').animate({marginTop: myvar});ですか？

http://jsfiddle.net/muVsE/

于 2013-03-01T07:41:46.163 に答える
0

必要な CSS プロパティを持つ追加の CSS クラスを作成してから、次の操作を行います。

$("#mydiv").addClass("classname", 1000);

また

$("#mydiv").removeClass("classname", 1000);
于 2013-03-01T07:44:30.643 に答える
0

このコードを試してください：

$("#mydiv").css("margin-top", "0px");
$("#mydiv").animate({ marginTop: topMargin+myvar}, 200);
于 2013-03-01T07:49:32.410 に答える
0

これがJSFiddleに役立つことを願っています

$('#left-bg, #right-bg').click(
    function(){
        $(this).animate({'width': '100%'},600).siblings().animate({'width':'0'},600);
    });

または、このJSfiddleを使用できます

$('#left-bg, #right-bg').click(
    function(){
        $(this).animate({'width': '100%'},600).siblings().animate({'width':'0'},600);
        $('<button class="show">Show all</button>')
            .appendTo('#wrapper');
    });

    $('.show').live('click',
                    function(){
                        $('#left-bg').animate(
                            {
                                'width': '50%'
                            },600);
                        $('#right-bg').animate(
                            {
                                'width': '50%'
                            },600);
                        $(this).remove();
                    });

または、これを使用して 1 つの div を拡張し、同時に他の div を縮小できます。

$('.cell')
    .on('mouseenter', function(){
        $(this).animate ({width:"75%"},"slow").siblings('.cell').animate({'width': '15%'}, "slow");
    })
    .on('mouseleave', function(){
        $(this).add($(this).siblings('.cell')).animate ({width:"45%"},"slow");
    });

よろしく。

于 2013-03-01T07:50:26.197 に答える