Question

我正试图从屏幕外移动一个div然后再切换到

$('a.show').on('click',function() {
if($('#left-navi-designers').css('left')=='0px'){
    $('#left-navi-designers').animate({left: '-100%'}, 1000);        
}else{
    $('#left-navi-designers').animate({left:0}, 1000); 
}
});

这就是我对JavaScript的看法。我的CSS有这个：

#left-navi-designers {
height: 100%;
position: fixed;
background: #fff;
width: 100%;
left: -100%;
 }

这是我的HTML：

<div id="left-icons"><a class="show" style="color:#999;">DUH!</a></div>
<div id="left-navi-designers">
 <div id="topNavigation">
<ul class="topLevelNavigation">
<a href=".topLevelNavigation" class="button"><li>DESIGNERS</li></a>
<a href=".topLevelNavigation2" class="button"><li>EMERGING</li></a>
<a href=".topLevelNavigation3" class="button"><li>STUDIOS</li></a>
<a href=".topLevelNavigation4" class="button"><li>NEW FACES</li></a>
<a href=".topLevelNavigation5" class="button"><li>EDITORS</li></a>
<a href="#box1" class="button"><li>MEDIA KIT</li></a>
<a href="#box1" class="button"><li>BEAUTY</li></a>
<a href="#box1" class="button"><li>BRANDS</li></a>
<a href="#box1" class="button"><li>MODELS</li></a>
<a href="#box1" class="button"><li>PARTIES</li></a>
 </ul></div>

我对此非常陌生，我只想弄清楚一些事情。这是我在http://keithfrenchdesigns.com/RunwayMag/designers_main.html

上播放的网站

提前致谢！

Answer 1

你也可以通过css转换来切换你的div。这更快，因为您只需要切换一个类。看看我的例子jsfiddle，看看我的意思。

http://jsfiddle.net/8Wkgf/1/

<强> jquery的

$('button').on('click', function(){
    $('#slider').toggleClass('open');

})

<强> CSS

#slider{
    background:blue;
    height:100px;
    width:500px;
    position:relative;
    left:-520px;  
}
.open{
    left:0px !important;
}
.transition{

  -webkit-transition: left 0.3s ease-out;  /* Chrome 1-25, Safari 3.2+ */
     -moz-transition: left 0.3s ease-out;  /* Firefox 4-15 */
       -o-transition: left 0.3s ease-out;  /* Opera 10.50–12.00 */
          transition: left 0.3s ease-out;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */

}

<强> HTML

<button>slide</button>
<div id="slider" class="transition"></div>

Answer 2

您的代码有效，我发现您已经包含了jQuery UI，因此使用animate和否定left，您可以使用可见性和toggle动画：

显示或隐藏匹配的元素。

代码：

$('a.show').on('click', function () {
    $('#left-navi-designers').toggle("slide", { direction: "left" }, 1000);
});

演示：http://jsfiddle.net/IrvinDominin/r7m3C/

Answer 3

您可以使用此功能。

function SlideIn(el){
    var elem = document.getElementById(el);
    elem.style.transition = "left 1.5s linear 0s";
    elem.style.left = "10px";
}
function SlideOut(el){
    var elem = document.getElementById(el);
    elem.style.transition = "left 1.5s linear 0s";
    elem.style.left = "-200px";
}

// Use this buttons, for example.
<button onclick="SlideIn('box1')">Slide in</button>
<button onclick="SlideOut('box1')">Slide out</button>

<div id="box1">Put something in here</div>

这只是一个例子，可以在你自己的盒子里试试。

Answer 4

我已尝试过像http://jsfiddle.net/wm3c4/这样的代码。并且它可以正常工作我看到的唯一问题是你的页面中有这个：

$('a.show').on('click',function() {
    if($('#website').css('left')=='0px'){
        $('#website').animate({left: '-100%'}, 1000);        
    }else{
        $('#website').animate({left:0}, 1000); 
    }
});

但是id="website"没有元素。尝试将该选择器更改为您在此处发布的选择器。

从屏幕外滑动div，然后再切换到开关

4 个答案: