jquery - 向左滑动比向右滑动

Question

我有这个动画。它在右侧工作，但我需要在左侧工作。我从左到右更改了 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/

Answer 1

您需要更改 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});
            }
        }    

     });
});

DEMO

编辑 - 由于 OP 希望先显示按钮然后隐藏，请对 margin-left 进行以下 CSS 更改，并保持 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
}

DEMO - First seen and then hide