so I'm trying to get better at using javascript and jquery, so I tried to implement a little animation. I have 2 divs in a list under each other, and my aim is, when a mouse hovers over one of the divs, it animates it's width to stretch it out, and when the mouse leaves, the div is still stretched out, only until the mouse enters another div, in which the new div will expand, and the other will return back to it's original size. I've managed to get the divs to expand and resize when entering and leaving them with the mouse, but when trying to implement a way so that only ONE div can be expanded at any time, I can never seem to get it to work.
Here's my code so far:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<style type="text/css">
li {
padding-top: 30px;
font-size: 20pt;
position: relative;
display: block;
}
.d1, .d2, .d3, .d4{
background-color: yellow;
width: 210px;
}
</style>
<script>
$(document).ready(function() {
var state = 0;
var selected = 0;
console.log(state);
$(".d1, .d2").mouseenter(function(){
state++;
selected = 1;
console.log(state);
$(this).animate({
width: '400px'
});
});
$(".d1, .d2").mouseleave(function(){
state++;
console.log(state);
if (state == 2 && selected == 1) {
$(".d1").animate({
width: '210px'
});
state = 0;
selected = 0;
}
});
});
</script>
</head>
<body>
<div class="fluid-container">
<div class="col-md-6 col-md-offset-3">
<h1>Animated Hover Slide</h1></br></br>
<ul>
<li><div class="d1">This is some text</div></li>
<li><div class="d2">This is some text</div></li>
</ul>
</div>
</div>
</body>
</html>答案 0 :(得分：1)
You could also simplify a bit and just add/remove an active class to the hovered div.
$(document).ready(function(){
$("ul li").hover(function(){
$("ul li").removeClass("active");
$(this).addClass("active");
});
});li {
background-color: yellow;
padding: 10px;
margin:5px;
font-size: 18px;
position: relative;
display: block;
width: 210px;
transition: all 0.5s ease;
}
li.active {
width: 500px;
}<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<div class="fluid-container">
<div class="col-md-6 col-md-offset-3">
<h1>Animated Hover Slide</h1>
<br>
<br>
<ul>
<li>This is some text</li>
<li>This is some text</li>
</ul>
</div>
</div>答案 1 :(得分：0)
You can use .data() to store state of element animation; if selected is 0, animate to 400px at mouseenter, set element having className beginning with "d" that is child of parent sibling to 210px
$(document).ready(function() {
$(".d1, .d2").data("selected", 0)
.mouseenter(function() {
if ($(this).data().selected === 0) {
$(this).animate({
width: '400px'
}).data("selected", 1)
.parent().siblings().find("[class^=d]")
.data("selected", 0)
.animate({
width: '210px'
})
}
})
});li {
padding-top: 30px;
font-size: 20pt;
position: relative;
display: block;
}
.d1,
.d2,
.d3,
.d4 {
background-color: yellow;
width: 210px;
}<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<div class="fluid-container">
<div class="col-md-6 col-md-offset-3">
<h1>Animated Hover Slide</h1>
<br>
<br>
<ul>
<li>
<div class="d1">This is some text</div>
</li>
<li>
<div class="d2">This is some text</div>
</li>
</ul>
</div>
</div>答案 2 :(得分：0)
Here's a solution that answers your question: https://jsfiddle.net/d8kjLgph/
I use the data-* attribute to keep track of which element that is the "big one".
Edit: I changed your original code a little bit, hope that's ok!
$(document).ready(function() {
$(".animate").mouseenter(function(){
/*
Checking that the .animate-element the mouse enters is a "small" one
*/
if($(this).attr("data-active") != "true"){
$(".animate").attr("data-active", "false"); // Reseting all divs to "small"
$(this).attr("data-active", "true"); // Keep track of which one that's active (the big one)
$(".animate:not([data-active='true']").animate({ // Animate all that's not active to "small"
width: '210px'
}, 500);
$(this).animate({ // Animate the active one to "big"
width: '400px'
}, 500);
}
});
});li {
padding-top: 30px;
font-size: 20pt;
position: relative;
display: block;
}
.animate{
background-color: lightgreen;
width: 210px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="fluid-container">
<div class="col-md-6 col-md-offset-3">
<h1>Animated Hover Slide</h1>
<ul>
<li><div class="animate">This is some text</div></li>
<li><div class="animate">This is some text</div></li>
<li><div class="animate">This is some text</div></li>
<li><div class="animate">This is some text</div></li>
</ul>
</div>
</div>