如何从右到左滑动一个div？

Please see this fiddle http://jsfiddle.net/MKwwH/

请看这个小提琴http://jsfiddle.net/MKwwH/

I want the link images-link to slide toggle right to left?

我想链接图片链接从右到左滑动切换?

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

3 个解决方案

#1

The issue is that you have left and right set. Just set right to 0 and it will work.

问题是你有左右设置。只需将其设置为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;
}

#2

You where almost right :

你几乎是对的:

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

But first you need to put width to a 0px;

但首先你需要将宽度设置为0px;

See this working jsFiddle example.

看到这个工作的jsFiddle示例。

#3

USE THIS FOR RIGHT TO LEFT SLIDING :

使用此权利至左侧滑动:

<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');
  });
});

SOURCE FILES: WATCH TUTORIAL AND DOWNLOAD SOURCE

来源文件:观看补习和下载资料

#1