一些jQuery Animate帮助?

时间:2012-12-12 10:42:25

标签: jquery jquery-ui jquery-animate wordpress

首先,我的jQuery真的很糟糕。我在Wordpress循环中有一个'ul',它呈现以下输出 - 'li'标签是循环中的各个帖子。

<ul id="list">
<li class="box">
    <div class="front">
        <h3> Some Front Stuff </h3>
        <p> Some front paragraph...</p>
    </div>
    <div class="back">
        <h3> Some back Stuff </h3>
        <p> Some back stuff.. </p>
    </div>
</li>
<li class="box">
    <div class="front">
        <h3> Some Front Stuff </h3>
        <p> Some front paragraph...</p>
    </div>
    <div class="back">
        <h3> Some back Stuff </h3>
        <p> Some back stuff.. </p>
    </div>
</li>
etc...etc..etc

我想要的是可在此处查看的内容:http://www.aatsol.co.za/temp/some_jquery/

我只是希望用户点击“查看更多详细信息”并让第二个div滑过第一个div以显示“back div”上的联系人详细信息

另一个很薄的是我只想在联系人详细信息上显示“X” - 允许用户关闭窗口并返回第一个div。我试图做一些事情,但我无法进一步 - 2周工作3行jQuery。非常感谢您的帮助。

我的jQuery:

$(document).ready(function() {
$(".box").click(function(){    
    $(this).find('.inner').stop().animate({top:0});    
});

// to close back div - not even touched 
$("a.close").click(function(){
    alert("close");
    $(this).find('.inner').stop().animate({top:340});
});});

任何帮助家伙!

1 个答案:

答案 0 :(得分:0)

我最终走了正确,不妨回答我自己的问题。我在下面的jquery脚本中使用'toggle'来实现结果:

$(".box").toggle(function(){
$(this).find(".inner").stop().animate({top:0});
}, function() {
$(this).find(".inner").stop().animate({top:340});} );
祝你好运!!