Jquery幻灯片效果不能正常工作

时间:2015-10-23 15:02:31

标签: javascript jquery html css slide

您好我试图为某个文字制作幻灯片效果,并且滑动效果广告就像额外的边距一样。'

效果:like margin or something, 框架是http://materializecss.com/

问题:是否有可能隐藏这个"保证金"?

$(document).ready(function(){
$('.collapse1').hover(function(){
    $('.collapsetext1').animate({
        width: 'show',
    }, 444);
});

});

3 个答案:

答案 0 :(得分:0)

"喜欢保证金或其他东西"。

我不太清楚这意味着什么。如果您基于" hover"动画元素,则不需要jQuery。

.collapse1 {
    margin: 10px;
    transition: margin .5s linear;
}

.collapse1:hover {
    margin: 0px;
}

这会将.callapse1的余量在10px和0px之间转换,当它徘徊时:)

答案 1 :(得分:0)

如果您只是想为文本制作滑动效果而没有任何余量, 你真的不需要依赖jQuery :(纯JS足够用一点CSS)

<!DOCTYPE html>
<html>
<head>
<style>
div#box1 {  
    width: 400px;   
    position: absolute;
    top: 50px;
    left: -400px;
}
</style>
<script>
function slideIn(el){
    var elem = document.getElementById(el);
    elem.style.transition = "left 0.5s ease-in 0s";
    elem.style.left = "0px";
}
function slideOut(el){
    var elem = document.getElementById(el);
    elem.style.transition = "left 0.5s ease-out 0s";
    elem.style.left = "-400px";
}
</script>
</head>
<body>
<button onclick="slideIn('box1');">slide in</button>
<button onmouseover="slideOut('box1');">slide out</button>
<div id="box1">Content in box 1 ...</div>
</body>
</html>

您现在可以随时调用这些功能,而不必单击按钮。  所以是的,很高兴去。 如果您需要解释,可以参考this(视频教程)链接。

答案 2 :(得分:0)

您可以使用jquery selector .css来更改任何css样式

$(document).ready(function() {
    $('.collapse1').hover(function() {
        $('.collapsetext1').css("margin", "");

    });
});