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

Answer 2

您不会更改所有参数。您需要从右到左更改页面上的.pollSlider和按钮位置。

.pollSlider{
    /*...*/
    left:0px;
    margin-left: -200px;
}
#pollSlider-button{
    left:0px;
}

之后你需要在js中将所有margin-right更改为margin-left。

<强> Demo on JSFiddle

Answer 3

只需将所有right页边距和right值更改为left

<强> CSS：

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

<强> jQuery的：

$(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});
        }
    }


  });
 });

向左滑动而不是向右滑动

3 个答案:

Live Demo on JSFiddle