如何從右向左滑動切換div？

請看這個小提琴http://jsfiddle.net/MKwwH/如何從右向左滑動切換div？

我想鏈接images-link滑動切換從右到左？

$(document).ready(function() { 
    $('.hidden').hide() 
}); 

$('.soundDiv-link').click(function() { 
    $('#soundDiv').slideToggle("slow") 
}); 

$('.videoDiv-link').click(function() { 
    $('#videoDiv').next().animate({width: 'toggle'}, "slow") 
}); 

$('.imagesDiv-link').click(function() { 
    $('#imagesDiv').animate({width: 'toggle'}, "slow") 
});

來源

2013-10-11 angela

問題是你有左和右設置。只需設置爲0，它就可以工作。

http://jsfiddle.net/MKwwH/4/

#imagesDiv { 
    background-color: yellow; 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    top: 0px; 
    bottom: 0px; 
    right: 0px; 
    overflow: hidden; 
    display: none; 
}

來源

2013-10-11 12:01:09 Smeegs

你在那裏差不多吧：

$('#videoDiv').next().animate({width: '100%'}, "slow");

但首先你需要把寬度爲0像素;

看到這個工作jsFiddle example。

來源

2013-10-11 11:19:16 Vladimir

謝謝，但這不是我所需要的。我希望它看起來像是滑出屏幕的右側。 – angela

用這個從右向左滑：

<div class="nav "> 
     <ul> 
     <li><a href="#">HOME</a></li> 
     <li><a href="#">ABOUT</a></li> 
     <li><a href="#">SERVICES</a></li> 
     <li><a href="#">CONTACT</a></li> 
     </ul> 
    </div>

CSS：

.nav{ 
    position: fixed; 
    right:0; 
    top: 70px; 
    width: 250px; 
    height: calc(100vh - 70px); 
    background-color: #333; 
    transform: translateX(100%); 
    transition: transform 0.3s ease-in-out; 

} 
.nav-view{ 
    transform: translateX(0); 
}

JS：

$(document).ready(function(){ 
    $('a#click-a').click(function(){ 
    $('.nav').toggleClass('nav-view'); 
    }); 
});

來源文件：WATCH TUTORIAL AND DOWNLOAD SOURCE

來源

2016-07-22 06:15:30

如何從右向左滑動切換div？

回答

相關問題