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

每次，但这使它有点笨拙。

有谁知道可以实现这一目标？

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

或者您可以使用它来扩展一个 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 回答