Question

我想aniamte改变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);

每次都会让它变得有点笨重。

有没有人知道有可能实现这个目标？

（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);

});

Answer 1

$('#mydiv').animate({marginTop: myvar});出了什么问题？

http://jsfiddle.net/muVsE/

Answer 2

创建具有所需CSS属性的其他CSS类，然后执行：

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

OR

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

Answer 3

试试这段代码：

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

Answer 4

我希望这有助于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();
                    });

或者您可以使用它来扩展一个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");
    });

问候。

JQuery动画.css（）而不是使用.animate（）？

4 个答案: