您好我试图为某个文字制作幻灯片效果,并且滑动效果广告就像额外的边距一样。'
效果:like margin or something, 框架是http://materializecss.com/。
问题:是否有可能隐藏这个"保证金"?
$(document).ready(function(){
$('.collapse1').hover(function(){
$('.collapsetext1').animate({
width: 'show',
}, 444);
});
});
答案 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", "");
});
});