Question

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

效果：like margin or something，框架是http://materializecss.com/。

问题：是否有可能隐藏这个＆＃34;保证金＆＃34;？

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

}）;

Answer 1

＆＃34;喜欢保证金或其他东西＆＃34;。

我不太清楚这意味着什么。如果您基于＆＃34; hover＆＃34;动画元素，则不需要jQuery。

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

.collapse1:hover {
    margin: 0px;
}

这会将.callapse1的余量在10px和0px之间转换，当它徘徊时：）

Answer 2

如果您只是想为文本制作滑动效果而没有任何余量，你真的不需要依赖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（视频教程）链接。

Answer 3

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

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

    });
});

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

3 个答案: