向左滑动比向右滑动

唐本尼

我有这个动画。它在右侧工作，但我需要在左侧。我从左到右更改了CSS，但是不再工作了。

    $(document).ready(function()
{
    var slider_width = $('.pollSlider').width();//get width automaticly
  $('#pollSlider-button').click(function() {
    if($(this).css("margin-right") == slider_width+"px" && !$(this).is(':animated'))
    {
        $('.pollSlider,#pollSlider-button').animate({"margin-right": '-='+slider_width});
    }
    else
    {
        if(!$(this).is(':animated'))//perevent double click to double margin
        {
            $('.pollSlider,#pollSlider-button').animate({"margin-right": '+='+slider_width});
        }
    }


  });
 });

http://jsfiddle.net/XNnHC/1907/

http://jsfiddle.net/XNnHC/1906/

布山·卡瓦德卡（Bhushan Kawadkar）

您需要同时更改css和jquery，如下所示

的CSS

.pollSlider{
    position:fixed;
    height:100%;
    background:red;
    width:200px;
    left:0px;//change
    margin-left: -200px;//change
}
#pollSlider-button{
    position:fixed;
    width:100px;
    height:50px;
    left:0px;//change
    background:green;
    top:300px;
}

jQuery-更改margin-right为margin-left

$(document).ready(function()
 {
      var slider_width = $('.pollSlider').width();//get width automaticly

      $('#pollSlider-button').click(function() {

        if($(this).css("margin-left") == slider_width+"px" && !$(this).is(':animated'))
        {
            $('.pollSlider,#pollSlider-button').animate({"margin-left": '-='+slider_width});
        }
        else
        {
            if(!$(this).is(':animated'))//perevent double click to double margin
            {
                $('.pollSlider,#pollSlider-button').animate({"margin-left": '+='+slider_width});
            }
        }    

     });
});

演示

编辑-OP希望先显示按钮然后隐藏按钮，请在CSS下方进行更改margin-left，并使jQuery与上面的答案相同-

的CSS

.pollSlider{
    position:fixed;
    height:100%;
    background:red;
    width:200px;
    left:0px;//changed
    margin-left: 0px;//changed
}
#pollSlider-button{
    position:fixed;
    width:100px;
    height:50px;
    left:0px;//changed
    background:green;
    top:300px;
    margin-left: 200px;//added
}

演示-先看到然后隐藏

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。