Javascript 如何使用div从右向左滑动以显示内容_Javascript_Jquery

Javascript 如何使用div从右向左滑动以显示内容

javascript jquery

Javascript 如何使用div从右向左滑动以显示内容,javascript,jquery,Javascript,Jquery,我看见一把小提琴。当光标悬停在其上时，它将从下到上设置动画我如何更改它，以便单击时，它将从右向左设置动画，然后，内容将被隐藏？当内容被隐藏时，会有一个按钮，我可以单击该按钮再次显示内容 HTML jquery $(document).ready(function(){ var innerHeigth = $(".inner").outerHeight(); $(".wrapper").hover(function(){ $(".inner").stop().animate({

我看见一把小提琴。当光标悬停在其上时，它将从下到上设置动画

我如何更改它，以便单击时，它将从右向左设置动画，然后，内容将被隐藏？当内容被隐藏时，会有一个按钮，我可以单击该按钮再次显示内容

HTML

jquery

$(document).ready(function(){
var innerHeigth = $(".inner").outerHeight();  
$(".wrapper").hover(function(){        $(".inner").stop().animate({top:-innerHeigth},1000);
//alert(innerHeigth)
},function(){
$(".inner").stop().animate({top:0},1000);

});
});

这是小提琴

您需要进行两项更改。首先调整样式表，使移动的div位于左侧而不是底部：

.inner{
    width:200px;
    height:100px;
    position:absolute;
    background-color:black;
    left:-200px;
    color:white;
}

然后更改javascript以响应单击、基于宽度并修改left属性。注意，有一个toggle方法的行为非常类似于hover，但它将从jQuery中删除，所以您必须有一个跟踪状态的布尔值

$(document).ready(function(){
    var width = $(".inner").width();
    var toggle = true;
    $(".wrapper").click(function(){
        if(toggle) {
            $(".inner").stop().animate({left:0},1000);
        } else {
            $(".inner").stop().animate({left:-width},1000);
        }
        toggle = !toggle;
    });
});

这里有一个更新的提琴：

您需要做两个更改。首先调整样式表，使移动的div位于左侧而不是底部：

.inner{
    width:200px;
    height:100px;
    position:absolute;
    background-color:black;
    left:-200px;
    color:white;
}

$(document).ready(function(){
    var width = $(".inner").width();
    var toggle = true;
    $(".wrapper").click(function(){
        if(toggle) {
            $(".inner").stop().animate({left:0},1000);
        } else {
            $(".inner").stop().animate({left:-width},1000);
        }
        toggle = !toggle;
    });
});

这是最新的提琴：

你基本上就在那里，只需要改变一些事情

HTML

<!DOCTYPE html>
<html>
<body>
    <div class="wrapper">   
        <div class="inner">
            Sliding div here!! Yay!!
        </div>
    </div>
    <button id="btn">click</button>
</body>
</html>

脚本

var hidden = true;

$(document).ready(function(){
    $("#btn").click(function() { 
        if(hidden) {
            $(".inner").stop().animate({left:0}, 1000);
            hidden = false;
        }
        else {        
            $(".inner").stop().animate({left:200},1000);
            hidden = true;
        }
    });
});

这里有一把小提琴来展示这一点：

你基本上就在那里，只需要改变一些事情

HTML

<!DOCTYPE html>
<html>
<body>
    <div class="wrapper">   
        <div class="inner">
            Sliding div here!! Yay!!
        </div>
    </div>
    <button id="btn">click</button>
</body>
</html>

脚本

var hidden = true;

$(document).ready(function(){
    $("#btn").click(function() { 
        if(hidden) {
            $(".inner").stop().animate({left:0}, 1000);
            hidden = false;
        }
        else {        
            $(".inner").stop().animate({left:200},1000);
            hidden = true;
        }
    });
});

这里有一把小提琴来显示：

您好，这是我想要的，但它可以停止并再次单击以隐藏：-）您好，这是我想要的，但它可以停止并再次单击以隐藏：-）如何可以单击，单击以显示并再次单击以隐藏：-）hide@FrancisAlvinTan我更新了我的答案，现在可以点击了。这个怎么可以点击，单击以显示，然后再次单击以显示hide@FrancisAlvinTan我更新了我的答案，现在它在点击时切换。