jQuery左右滑动 [英] jQuery Slide Right/Left

问题描述

我有以下JS:

$(document).ready(function () {
    $(".LeftColumn").hide();
    $(".SidebarToggle").toggle(function () {
        $(this).addClass("active");
        $(this).text("Hide Sidebar");
        $(this).attr("title", "Hide Sidebar");
        //$(".LeftColumn").fadeIn("fast");
        $(".LeftColumn").show("slide", { direction: "left" }, 100);
        return false;
    },
    function () {
        $(this).removeClass("active");
        $(this).text("Show Sidebar");
        $(this).attr("title", "Show Sidebar");
        //$(".LeftColumn").fadeOut("fast");
        $(".LeftColumn").hide("slide", { direction: "left" }, 100);
        return false;
    });

基本上可以显示和隐藏带有LeftColumn类的div.我的问题是LeftColumn向左浮动，而我旁边还有另一个名为Middle Column的div向左浮动.但是，当我制作动画时，LeftColumn会做一个不错的缓动幻灯片，但是MiddleColumn会快速进出，以填补空白.如何使MiddleColumn相对于LeftColumn来回移动(请记住，MiddleColumn没有定义的宽度).

Which basically shows and hides a div with a class of LeftColumn. The problem I have is that LeftColumn floats left and I have another div called Middle Column that floats left next to it. But when I do the animation the LeftColumn does a nice easing slide but the MiddleColumn will snap in and out to fill the void. How can I get the MiddleColumn to ease back and forth in relation to the LeftColumn (baring in mind that the MiddleColumn has no defined width).

谢谢

推荐答案

您知道左列的宽度吗?如果是，则可以在中间列上设置position:absolute，然后在滑动左列的同时为其设置"left"值的动画.我有道理吗?

Do you know the width of the left column, the one that shows/hides? If yes, you could set position:absolute on the middle column and then animate its "left" value together with sliding the left column. Do I make sense?

我相信问题是由于中间列上的float:left所致.如果左侧栏不存在，则中间栏将显示在最左侧.因此，当动画持续播放时，它会认为左列就好像在那儿一样.动画制作完成后，左列将被隐藏，元素将重新对齐并获得捕捉效果.

I believe the problem is due to float:left on the middle column. If the left column wouldn't be there, the middle column would be displayed on the most left. So, while the animation lasts, it thinks of the left column as if it's there. Once the animation is done, the left column is hidden, elements get realigned and you get the snapping effect.

因此，假设您的标记是这样的:

So, assuming your mark up is something like this:

<div style="position:relative;">
  <div class="LeftColumn" style="float:left;"></div>
  <div class="MiddleColumn" style="position:absolute;left:200px;"></div>
</div>

现在在您的JavaScript中显示:

Now in your javascript for showing:

$(".LeftColumn").show("slide", { direction: "left" }, 100);
$(".MiddleColumn").animate({'left': '200'}, 100);

并隐藏:

$(".LeftColumn").hide("slide", { direction: "left" }, 100);
$(".MiddleColumn").animate({'left': '0'}, 100);

因此，在对左列的隐藏进行动画处理时，同时还要对中间列的位置进行动画处理. (我对为什么要设置动画方向:隐藏和显示中的左"感到困惑.在演出中不应该将动画方向:右"吗?)

So while animating the hide of the left column, you're also animating the position of your middle column. (I'm confused on why you're animating direction: "left" in both hide and show. Shouldn't on show be animating direction: "right"?)

这篇关于jQuery左右滑动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！