0

我有几个带有“itemWerk”类的div。我希望切换它们，以便我可以放大它们并将它们设置回原始大小和位置。

正如你在这里看到的，我已经走了很远。这只是我无法开始工作的第二个功能中的定位。我不确定我应该使用什么：.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;
}
4

2 回答 2

2

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

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

是的，我正要从评论中说这些。

注意： jQuery UI.animate()项目通过允许一些非数字样式（例如颜色）动画化来扩展该方法。该项目还包括通过 CSS 类而不是单个属性指定动画的机制。

使用 jQuery的 CSS 类动画示例，不使用内联样式。

如果你只想依赖 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/

于 2013-01-28T02:28:44.850 回答
0

您可以使用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 }) 

});
于 2013-01-28T02:47:55.340 回答