2

我想让它specialist_pagecontent从左边出现（滑动），就像blindleftin从这里开始一样，但我无法让它与this一起工作。实际上，计划是，而不是hide()理想blindLeftOut('fast');hide()，而不是show()我需要show();blindLeftOut('slow')，但正如我所说，我不能让blindLeftOut 和blindLeftIn 为我工作。

4

2 回答 2

4

我认为 jQuery 的动画功能可能对你有用。

您需要做的是将位于窗口外的隐藏 div 添加到您的 HTML 中（或者document.ready如果您愿意，可以在事件上使用 jquery 动态添加它）并使用上述动画函数将其滑入并out 并将其绑定到菜单项的单击功能。

工作小提琴

这是一个适合您的JSFiddle

于 2012-12-21T23:16:07.410 回答
1

给你想要动画进出的元素一个viweport. 一个层，您可以通过它查看其中的元素。然后将 thisviewport的overflow属性设置为hidden并给它一个特定的宽度/高度。

通过这种方式，您可以为其中的元素设置动画，viewport使它们看起来可以滑入/滑出。

以下是我对您的 JS 所做的更改：

//notice the use of the "active" class to save state
$('.specialist_pagecontent').eq(0).addClass("active").animate({ left : 0 }, 500);
$('.specialist').click(function() {  
    //stop() is used to stop the current animation, so animations don't queue up if many buttons are clicked rapidly
    $('.specialist_pagecontent').filter(".active").removeClass("active").stop(true).animate({ left : '-100%' }, 500); 
    $('.selected-specialist').removeClass('selected-specialist');
    $(this).addClass('selected-specialist');
     $('.specialist_pagecontent').eq($(this).index('.specialist')).addClass("active").stop(true).animate({ left : 0 }, 500);
});

以下是我对 CSS 的建议编辑：

.specialist_pagecontent {
    position:absolute;
    top:0;
    left:-100%;
}
#specialist_lists {
    float:left;
    border: 1px solid #000000;
    position:relative;
    width:200px;
    height:200px;
    overflow:hidden;
}

这是一个演示：http: //jsfiddle.net/Jwkw6/1/

这绝对定位了要动画的元素，这非常有用，因为它从文档的常规流中删除了元素（这意味着它在动画时不会触发整个页面重绘）。这也创建了viewport我提到的，创建了一个窗口，我们可以在其中查看动画。

于 2012-12-21T23:12:42.820 回答