Question

我有几个带有“itemWerk”类的div。我希望切换它们，这样我就可以放大它们并将它们恢复到原来的大小和位置。

我已经走得很远，你可以看到here。这只是我的第二个功能中的定位，我无法开始工作。我不太确定我应该使用什么：.position或.offSet或.data ...看过几个指南，解释我正在寻找但却无法使用它。

这是我的jQuery代码：

$('.itemWerk').toggle(

function(){

    $(this)
        .animate({'z-index':'10'}, { duration: 0, queue: false })
        .animate({'left':'0.5em'}, { duration: 400, queue: false })
        .animate({'top':'0.5em'}, { duration: 400, queue: false })
        .animate({'width':'74em'}, { duration: 400, queue: false })
        .animate({'height': '53em'}, { duration: 400, queue: false })

    $("#achtergrondWerk")
        .animate({'height':'54em'},{ duration: 400, queue: false }) 
;},

function(){

    $(this)
        .animate({'left':'postion.left'}, { duration: 400, queue: false })
        .animate({'top':'position.top'}, { duration: 400, queue: false })
        .animate({'width':'10em'}, { duration: 400, queue: false })
        .animate({'height': '16em'}, { duration: 400, queue: false })

    $("#achtergrondWerk")
        .animate({'height':'38em'},{ duration: 400, queue: false }) 
});

以下是HTML文档中的一个div：

<div class="itemWerk" id="werkEen">



</div>

这是类.itemWerk的CSS代码

.itemWerk {
width: 10em;
height: 16em;
background: white;
float: left;
overflow: hidden;
white-space: nowrap;
cursor: pointer;
}

和ID #werkEen

#werkEen {
position: absolute;
top: 2em;
left: 2em;
}

Answer 1

animate()使用style属性。所以你可以这样做：

$('.itemWerk').removeAttr('style');

是的，我准备在评论中说出那些。

注意： jQuery UI项目通过允许对颜色等非数字样式进行动画处理来扩展.animate()方法。该项目还包括通过CSS类而不是单个属性指定动画的机制。

CSS Class Animation using jQuery的示例，不使用内联样式。

如果您只想依赖jQuery和.animate()方法，可以使用.data()存储以前的值。

$('.itemWerk').toggle(

function(){

    $.data(this, 'top', $(this).css('top'));
    $.data(this, 'left', $(this).css('left'));
    /* if you need to store others, yeah, go ahead **/

    $(this)
        .animate({'z-index':'10'}, { duration: 0, queue: false })
        .animate({'left':'0.5em'}, { duration: 400, queue: false })
        .animate({'top':'0.5em'}, { duration: 400, queue: false })
        .animate({'width':'74em'}, { duration: 400, queue: false })
        .animate({'height': '53em'}, { duration: 400, queue: false })

    $("#achtergrondWerk")
        .animate({'height':'54em'},{ duration: 400, queue: false }) 
;},

function(){

    $(this)
        // use the $.data this way: //
        .animate({'left':$.data(this, 'left')}, { duration: 400, queue: false })
        .animate({'top':$.data(this, 'top'}, { duration: 400, queue: false })
        .animate({'width':'10em'}, { duration: 400, queue: false })
        .animate({'height': '16em'}, { duration: 400, queue: false })

    $("#achtergrondWerk")
        .animate({'height':'38em'},{ duration: 400, queue: false }) 
});

工作小提琴：http://jsfiddle.net/praveenscience/K2PL3/

Answer 2

您可以使用data存储元素的顶部和左侧位置。然后在将项目设置回原位时使用这些值。

http://jsfiddle.net/AKhGc/

您可以选择offset或position来检索顶部和左侧值。您想要position，因为您正在寻找与父母相对的人。

$('.itemWerk').toggle(

function () {
    //store itemWerk's original size and position
    var $this = $(this);
    $this.data('left', $this.position().left).data('top', $this.position().top);

    //animation code removed because it isn't relevant to the answer

},

function () {
    $this = $(this);

    $(this)
        .animate({'left':$this.data('left')}, { duration: 400, queue: false })
        .animate({'top':$this.data('top')}, { duration: 400, queue: false })
        .animate({'width':'10em'}, { duration: 400, queue: false })
        .animate({'height': '16em'}, { duration: 400, queue: false })

    $("#achtergrondWerk")
        .animate({'height':'38em'},{ duration: 400, queue: false }) 

});

jQuery：将<div>切换到它在CSS </div>中的divs ID上所述的原始位置

2 个答案:

工作小提琴：http://jsfiddle.net/praveenscience/K2PL3/