jQuery幻灯片效果无法正常工作
[英]Jquery slide effect not working as it should
问题描述
您好，我想为特定文本制作幻灯片效果，而滑动效果则带来了额外的利润。
效果： 像边距之类的东西 ，框架是http://materializecss.com/ 。
问题：是否有可能隐藏此“边距”？
$(document).ready(function(){
$('.collapse1').hover(function(){
$('.collapsetext1').animate({
width: 'show',
}, 444);
});
}）;
3 个解决方案
解决方案1
0 2015-10-23 15:11:56
“像保证金之类的东西”。
我不太清楚这是什么意思。 如果您要基于“ hover”为元素设置动画，则不需要jQuery。
.collapse1 {
margin: 10px;
transition: margin .5s linear;
}
.collapse1:hover {
margin: 0px;
}
当鼠标悬停时，它将在.callapse1上的边距在10px和0px之间转换：)
解决方案2
0 2015-10-23 15:16:16
如果您只是想让文本产生滑动效果而没有任何余量，那么您实际上就不需要依赖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>
现在，您可以随时调用函数，而不必单击按钮。 是的，很好。 如果需要说明，可以参考此 （视频教程）链接。
解决方案3
0 2015-10-23 15:23:15
您可以使用jquery选择器.css更改任何CSS样式
$(document).ready(function() {
$('.collapse1').hover(function() {
$('.collapsetext1').css("margin", "");
});
});
jQuery上滑/下移效果不适用于div
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.