Jquery slide effect not working as it should
Question
Hi im trying to make a slide effect for a certain text and the sliding effect ads something like additional margin.'
The effect: like margin or something , the framework is http://materializecss.com/ .
The question: Is there any possibility to hide this "margin"?
$(document).ready(function(){
$('.collapse1').hover(function(){
$('.collapsetext1').animate({
width: 'show',
}, 444);
});
});
3 answers
solution1
0 2015-10-23 15:11:56
"Like margin or something".
I dont quite know what this means. Put if you are animating elements on based on "hover", you don't require jQuery.
.collapse1 {
margin: 10px;
transition: margin .5s linear;
}
.collapse1:hover {
margin: 0px;
}
This will transition the margin on .callapse1 between 10px and 0px when it's hovered :)
solution2
0 2015-10-23 15:16:16
If you just want to make a sliding effect for the text without having any margin , you really do not need to rely on jQuery :(Pure JS is enough with a little bit of 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>
You can now call the functions any time not necessarily on a button click. So yeah , good to go . You can refer this (video tutorial) link if you want an explanation .
solution3
0 2015-10-23 15:23:15
You can use jquery selector .css to change any css style
$(document).ready(function() {
$('.collapse1').hover(function() {
$('.collapsetext1').css("margin", "");
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.