I'm a super novice (I learned html, css, jQuery last week on codeAcademy) so this may be a dumb question.
However, when I drag my cursor quickly across the block in the following example the animation seems to stick, in other words, the blocks remain opaque. Could you all help me? My code it linked below. Thank you in advance.
http://jsfiddle.net/ivanjsfiddle00/eFShc/1/
$(document).ready(function() {
$(".button").hover(function() {
$(this).filter(':not(:animated)').animate({"opacity": 1 })
}, function() {
$(this).filter(':not(:animated)').animate({"opacity": 0.5 })
});
});
EDIT:
Thank you all. Substituting filter(':not(:animated)') with stop(true) worked.
You need to use stop() to clear the animation queue between events. This also makes your filter(':not(:animated)') redundant.
$(".button").hover(function () {
$(this).stop(true).animate({
"opacity": 1
})
}, function () {
$(this).stop(true).animate({
"opacity": 0.5
})
});
Example fiddle
#Rory seems to have answered the original question, but it's worth pointing out that another option would be to use CSS and make use of the :hover pseudo element.
.button {
float: left;
margin: 1px;
opacity: 0.5;
display: inline-block;
background-color: #757575;
width: 50px;
height: 50px;
}
.button:hover{
background-color:#323a44;
}
detecting if the element is in animating before animate
add if($(this).is(":animated")) return false; before your animate code
Related
I have jquery to change the background image when hovering on the text. I want to add a fade in effect.
here is the code I have now:
$(document).ready(function(){
$("#anatomyNow").hover(function(){
$("#bg").css("background-image", "url(image/anatomyNow5.png)");
}, function(){
$("#bg").css("background-image", "url(image/anatomyNow5.png)");
});
});
I tried to add the code below but it doesn't work.
$(document).ready(function(){
$("#anatomyNow").hover(function(){
$("#bg").fadeIn();
});
});
Update:
Thank you all for answering.
The effect I want is something like this:
https://www.christinewalthall.com/work
When you hover over the text, the background image will change. I have managed to do that, but the image changed too fast. I hope to add the effect so the image does not change dramatically.
fadeIn animates the opacity of an element, so using it in this context wouldn't work.
There's probably more than one way to achieve what you want here, but the one that comes to mind is layering images/divs with background images on top of each other and using css opacity transition on hover.
I did a bit of googling for you and here's a resource that shows how to go about that:
http://css3.bradshawenterprises.com/cfimg/
If I don't misunderstood your requirements then this is something you want.
$(document).ready(function() {
$("#effect").hover(function() {
$(this).animate({
opacity: '1'
}, "slow");
}, function() {
$(this).animate({
opacity: '0.5'
}, "slow");
});
});
#effect {
padding: 0.4em;
background: #555 url("https://thumb9.shutterstock.com/display_pic_with_logo/77318/1007648908/stock-photo-sunrise-beam-in-the-beautiful-park-1007648908.jpg");
opacity: 0.5;
}
#effect {
max-width: 490px;
height: 320px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="effect" class="ui-widget-content ui-corner-all"></div>
So I'm trying to create a box that has two layers: The front layer and the back layer. They're going to be stacked on top of each other so the back layer is hidden by default.
When you hover over the top of the box (front layer technically), then the front layer is supposed to slide up revealing the back layer. I tried to do this by using .slideUp() and .slideDown() but it kept bugging out revealing both layers at the same time. So then I switched to just .slideUp() and .fadeIn() but that didn't seem to help too much.
As you can see, it sometimes shows both divs when it's not supposed to and it also slides multiple times randomly. How could I make this more efficient?
Here is a JsFiddle
UPDATE:
Questions seeking debugging help ("why isn't this code working?") must
include the desired behavior, a specific problem or error and the
shortest code necessary to reproduce it in the question itself.
Questions without a clear problem statement are not useful to other
readers.
That is the reason people are voting to close this answer... What does this question not have, from that list?
Desired behavior? - Check
Specific problem? - Check
Shortest code necessary? - Check
Clear problem? - check
You don't really need to use slideUp and slideDown, you can achieve the slide effect by using the transform and transition CSS3 properties.
Updated JS fiddle: https://jsfiddle.net/9uw2q24h/3/
Javascript:
$('.outer').hover(function() {
$(this).children('.front').addClass('front-up');
}, function() {
$(this).children('.front').removeClass('front-up');
});
CSS:
.outer {
position: relative;
.front,
.back {
text-align: center;
width: 100%;
}
.back {
display: block;
}
.front {
position: absolute;
transition: 0.5s ease;
}
.front-up {
transform: translateY(-100%);
}
}
If you have to support older browsers, make sure to add the vendor prefixes to the transition and tranform rules (-webkit-, -moz-, etc.).
You can do this like:
var running = false;
$('.outer').hover(function() {
if (!running) {
running = true;
$(this).children('.front').slideUp(function() {
$(this).next('.back').slideDown(function() {
running = false;
});
});
}
}, function() {
if (!running) {
running = true;
$(this).children('.back').slideUp(function() {
$(this).prev('.front').slideDown(function() {
running = false;
});
});
}
});
Explanation: as soon as the animation starts you save the status in a variable in order to avoid conflicts (otherwise it will be called again). Additionally with the slideDown and slideUp combined you have a much smoother animation. You had a not very nice flickering with your combination of fadeOut and slideDown
Fiddle: https://jsfiddle.net/dL7ckq6b/
With a slight tweak to your CSS, specifically making your elements' position property absolute, will cause your back element to be behind your front element from the start, now you only have to show/hide your front element.
Javascript:
$('.outer').hover(function() {
$('.front').slideUp();
console.log("IN");
}, function() {
$('.front').slideDown();
console.log("OUT");
});
I did also update the CSS to more clearly show the effect happening.
CSS:
.outer {
.front,
.back {
text-align: center;
position: absolute;
padding: 20px 10px;
border: 2px solid yellow;
}
.front {
z-index: 10;
background-color: red;
}
.back {
z-index: 0;
background-color: blue;
}
}
Here is the JSFiddle: https://jsfiddle.net/z8e7eb4b/
I am trying to get this jQuery dropdown to work properly: http://jsfiddle.net/a2geG/2/
The first problem is that both .bounce-summary div elements are open by default. I'd like them to be closed by default and have included the following to achieve that, but it doesnt seem to work:
.bounce-summary {
width: 75%;
height: 100px;
background: #ccc;
position: relative;
display: none;
}
The second issue is that when then first li element is clicked, the bottom one doesn't transition smoothly but seems to jump a bit as well. How can I prevent this behavior?
Thanks!
Try setting easing: 'swing', it makes it much smoother and just set toggle to false later after defining toggle. Fiddle
$(document).ready(function () {
$("ol.rounded-list li").click(function () {
$(this).find("div.bounce-summary").toggle("slide", {
duration: 700,
easing: 'swing',
direction: 'up'
});
});
$(this).find("div.bounce-summary").toggle(false);
});
Update 1
I just added to .rounded-list the following css:
div.enumerate {
display: block;
margin: .5em 0;
}
while removing margin: .5em 0; from the main div:
Updated Fiddle: Fiddle
The boxes are both expanded because you define:
.rounded-list {
...
div {
display: block;
}
...
}
which takes precedence over the display: none defined in your .bounce-summary, as the aforementioned selector is more specific.
I ll tell you what the problem is :
when you add margin to div then it adds to all the divs.
So when you try clicking to have the bounce effect, the resulting div will have margins on top and bottom as well as the original div which is already present.
added
li{
margin: .5em 0;
}
.bounce-summary{
margin-top: 10px;
}
and removed the margin from the div.
fiddle here
I really don't know why this doesn't work: fiddle
When I click on the red box, I want it to move down 50px and change the height to 200px.
Any Idea?
Well this is how CSS work sadly, IDs take higher priority as a selector than a class would read this article for more info.
On click i added a class with the size/marign changes you wanted.
.box {
background-color: red;
height: 100px;
margin-top: 0px;
width: 100px;
display: block;
transition: all .5s ease-in-out;
}
.box-active {
height: 200px;
margin-top: 50px;
}
The JS
$('.box').click(function(){
$(this).addClass("box-active");
});
Here's a fiddle with the working solution.
Fiddle
You could use this instead:
jsFiddle example
$('#box').click(function(){
$(this).css('margin-top','50px');
$(this).css('height','200px');
});
I also added in the -webkit-/-moz- vendors/prefixes.
function changeprop(id)
{
$(id).css({'margin-top', '50px'});
$(id).css({'height', '200px'});
}
SyntaxError: missing : after property id
$(id).css({'margin-top', '50px'});
use : between property name and value not ,
function changeprop(id)
{
$(id).css({'margin-top': '50px'});
$(id).css({'height': '200px'});
}
this will work fine
maybe you can write your code in local html file and watch the console message throw firebug or other develop tool
thus can suffer less from error
I'm trying to get an accordion effect on a DIV when hovering.
The right side of the accordion is working already, but the left one isn't.
I put my code in jsFiddle
Can someone please help me with the left side? I've been trying it for hours but it won't work :(
Javascript:
$(document).ready(function () {
$('.middle').hover(function () {
$(this).siblings().stop().animate({
opacity: 1
}, 200);
},
function () {
$(this).siblings().stop().animate({
opacity: 0
}, 200);
});
});
The reason the right is fading, and the left isn't is because you are applying a CSS transition to the right side spans.
You can easily address this by applying the same transition to <span> tags:
.squares span {
transition-property:opacity;
transition-duration:1s;
transition-delay:0.1s;
}
In fact, you could condense your code and make it easier to adjust overall by combining repeated styles across the multiple spans into single definitions.
For example:
.squares span {
opacity: 0;
float: left;
width: 139px;
height: 138px;
transition-property:opacity;
transition-duration:1s;
transition-delay:0.7s;
}
span.middle {
background:#0f0;
opacity: 1;
}
span.left1,
span.right1 {
background:#00F;
transition-delay:0.1s;
}
span.left2,
span.right2 {
background:#0FF;
transition-delay:0.3s;
}
span.left3,
span.right3 {
background:#0F0;
transition-delay:0.5s;
}
span.left4,
span.right4 {
background:#FF0;
transition-delay:0.7s;
}
See the working example here: http://jsfiddle.net/uBBZ2/14/
In your css you set the transition-property and transition-duration settings on the right side blocks, but not the left side ones. If you comment them out, both transitions happen quickly and at the same time. If you add those settings mirrored to the left side, they both happen more slowly.