jQuery:将 切换到其原始位置，如 CSS 中的 div ID 所述

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

是的，我正要从评论中说出那些话。

Note: The jQuery UI project extends the .animate() method by allowing some non-numeric styles such as colors to be animated. The project also includes mechanisms for specifying animations through CSS classes rather than individual attributes.

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

工作 fiddle :http://jsfiddle.net/praveenscience/K2PL3/