jQuery: click indicator on div - javascript

It may be obvious I'm very new to web development. Anyway, I'm trying to create a click event on a div and change its background color. But I want the background to change back to its original color after the click up. Here is what I have:
jQuery:
$('.details1').click(function() {
$(this).toggleClass('on').delay(200).toggleClass('on');
});
css:
div.on {
background: #F78181;
}
I don't exactly want a millisecond delay, that's just for debugging. Just want to change background on click down and up. Thanks.

You have to use setTimeout() function for your problem instead of delay()
$('.details1').click(function(){
setTimeout(function(){ $('#clrd').toggleClass('on'); }, 200);
});
you can change the time (milliseconds) as per your need. In this case it is 200ms
Check this Fiddle

Related

Need help editing some javaScript/jQuery - Hover intent

I am trying to edit this code for my website. Right now, on hover it activates an overlay on the image. I want to add to it so that in addition to activating the overlay it also changes the background color of the body. Can this be done within this code or is this more work than I think? Thanks!
jQuery('.images').hoverIntent(function() {
jQuery(this).find('.title-wrap').stop().each(function() {
jQuery(this).animate({
width: jQuery(this).data('wrapping')
}, 150);
});
One way to configure hoverIntent is with 2 functions as arguments .... one for each of mouseenter and mouseleave.
For the body just toggle a class and set the background in a css rule
function hoverIn(){
$('body').addClass('different-background-class');
jQuery(this).find('.title-wrap').stop().each(function() {
jQuery(this).animate({
width: jQuery(this).data('wrapping')
}, 150);
}
function hoverOut(){
$('body').removeClass('different-background-class');
jQuery(this).find('.title-wrap').stop().width('auto');
}
// pass the 2 function references as arguments
jQuery('.images').hoverIntent(hoverIn,hoverOut);
I'm not sure if you have width defined prior to this animation. If so we can store the initial value within hoverIn() function in order to reset it in hoverOut(). I used auto assuming it wasn't set in normal state

Why is my jQuery transition is glitchy?

I have a jQuery transition with a css overlay that will work fine if the user mouses over for a second or more....however if the user mouses over quickly then the overlay text stays put without the overlay background. Here is my jQuery code:
$(".cascade-t1").hover(function(){
$(".cascade-corner").fadeOut();
$(".overlay-t1").animate({"left": "-300px"}, 300, function(){
$(".cascade-overlay-content").fadeIn(200);
});
}, function(){
$(".cascade-corner").fadeIn();
$(".cascade-overlay-content").fadeOut(200, function(){
$(".overlay-t1").animate({"left": "130px"}, 300);
});
});
Here is the script in action
It looks like the issue is that you don't fadeIn() the .overlay-t1 text until the mouseenter animation is done, and on mouseleave you fadeOut() the text out right away before the animation. When you move your mouse in and out faster than initial the animation the code will fade out the text and then fade it in again (the issue you're seeing).
One possible solution is to slightly alter your bottom (mouseleave) function to resemble your top (mouseenter) function more closely. Something like:
$(".cascade-corner").fadeIn();
$(".overlay-t1").stop(true, true).animate({"left": "130px"}, 300, function () {
$(".cascade-overlay-content").fadeOut(200);
});
The .stop() is there to keep the animation from playing over and over when someone spams the box.
FIDDLE DEMO
Not sure how jquery animate works under the hood but it's possible it's using javascript to animate instead of css transitions. The benefit of css transitions is that it does all of the animation calculations before the animation begins and is hardware accelerated. Javascript is at the mercy of the scheduler at a very high level so it will always be choppy.
Try jquery transit.
http://ricostacruz.com/jquery.transit/

MooTools Tween Stutter/Hiccup

I am doing a rather simple Tween animation using MooTools. The opening animation is perfectly smooth. But then I added the closing animation (opposite of the opening animation), but it seems to stutter/hiccup at the end almost every time.
I tried the following with no success:
Removed all HTML content from the expanding DIV
Passing the Bounce settings directly to the Set function instead of using the variable
Commented the #content animation to be sure there is only 1 animation running
Commented the addClass and removeClass actions
I can't figure out what's causing the problem. Maybe someone else can have a look…
I put the test-case online here: http://dev.dvrs.eu/mootools/
window.addEvent('domready', function() {
// Set initial Div heights
$('sideBar').setStyle('height', window.getSize().y);
$('sideMenu').setStyle('height', window.getSize().y);
// Set Div heights on Window resize
window.addEvent('resize', function() {
$('sideBar').setStyle('height', window.getSize().y);
$('sideMenu').setStyle('height', window.getSize().y);
});
var bounce = {
transition: Fx.Transitions.Back.easeOut,
duration: 500
};
$$('.button.closeMenu').addEvent('click', function(event) {
event.preventDefault();
$$('.button').removeClass('active');
this.addClass('active');
$('sideMenu').set('tween', bounce);
$('sideMenu').tween('width', 0);
$('content').set('tween', bounce);
$('content').tween('margin-left', 90);
});
$$('.button.menu').addEvent('click', function(event) {
event.preventDefault();
$$('.button').removeClass('active');
this.addClass('active');
$('sideMenu').set('tween', bounce);
$('sideMenu').tween('width', 300);
$('content').set('tween', bounce);
$('content').tween('margin-left', 390);
});
});
Fiddle with example here
The transition you are using goes over the values defined as final value in the .set(property, value);. So when opening the final width is 300px but the transition/effect goes over that and than soft back to the final value.
This works great when opening because width can be 310px or more and then return to 300px, but when with has a transition under the with 0px, it doesn't work so good. It actually works ok if the final width is 10px (check here), but that's not the effect you want.
So my suggestion is to fix it with CSS, or change the transition when closing the sidebar, or use another effect altogether.
Option 1: fiddle - same transition opening, no easeout closing
Option 2: fiddle - same effect as you have but played with CSS and hidded 10px of the sidemenu under the sidebar. (z-index:3; on #sideBar and left:80px;width: 10px; on #sideMenu. Also 10px as the final value for the tween.)
To check different transitions at Mootools demo's look here.

How do I stop a bouncy JQuery animation?

In a webapp I'm working on, I want to create some slider divs that will move up and down with mouseover & mouseout (respectively.) I currently have it implemented with JQuery's hover() function, by using animate() and reducing/increasing it's top css value as needed. This works fairly well, actually.
The problem is that it tends to get stuck. If you move the mouse over it (especially near the bottom), and quickly remove it, it will slide up & down continuously and won't stop until it's completed 3-5 cycles. To me, it seems that the issue might have to do with one animation starting before another is done (e.g. the two are trying to run, so they slide back and forth.)
Okay, now for the code. Here's the basic JQuery that I'm using:
$('.slider').hover(
/* mouseover */
function(){
$(this).animate({
top : '-=120'
}, 300);
},
/* mouseout*/
function(){
$(this).animate({
top : '+=120'
}, 300);
}
);
I've also recreated the behavior in a JSFiddle.
Any ideas on what's going on? :)
==EDIT== UPDATED JSFiddle
It isn't perfect, but adding .stop(true,true) will prevent most of what you are seeing.
http://jsfiddle.net/W5EsJ/18/
If you hover from bottom up quickly, it will still flicker because you are moving your mouse out of the div causing the mouseout event to fire, animating the div back down.
You can lessen the flicker by reducing the delay, however it will still be present until the delay is 0 (no animation)
Update
I thought about it and realized that there is an obvious solution to this. Hoverintent-like functionality!
http://jsfiddle.net/W5EsJ/20/
$(document).ready(function() {
var timer;
$('.slider').hover(
/* mouseover */
function(){
var self = this;
timer = setTimeout(function(){
$(self).stop(true,true).animate({
top : '-=120'
}, 300).addClass('visible');
},150)
},
/* mouseout*/
function(){
clearTimeout(timer);
$(this).filter(".visible").stop(true,true).animate({
top : '+=120'
}, 300).removeClass("visible");
}
);
});
You could use .stop() and also use the outer container position
$(document).ready(function() {
$('.slider').hover(
/* mouseover */
function(){
$(this).stop().animate({
top : $('.outer').position().top
}, 300);
},
/* mouseout*/
function(){
$(this).stop().animate({
top : $('.outer').position().top + 120
}, 300);
}
);
});
​
DEMO
Hope this helps
Couldn't reproduce your issue but I believe that hover is getting called multiple times. To work around this you can check if the div is already in animation. If yes, then don't run another animation again.
Add following piece of code to check if the div is already 'animating':
if ($(this).is(':animated')) {
return;
}
Code: http://jsfiddle.net/W5EsJ/2/
Reference:http://api.jquery.com/animated-selector/
I understand the problem and reproduced it, it happens when hovering from the bottom up. The hovering with the mouse is what's causing the problem since the animation function will be called when the mouse hovers over the image. You need to control what happens here by using mouse enter and mouse leave, check out a similar example: Jquery Animate on Hover
The reason it's like that is because the hover is getting queued up causing it to slide up and down multiple times. There's a plug-in called hoverIntent which fixes the issue. http://cherne.net/brian/resources/jquery.hoverIntent.html
If you do decide to use hoverIntent, the only thing you have to change in your code is .hover > .hoverIntent

Using jQuery for alternating png transition

Very basic question. I have a very simple web design utilizing a png with transparency, overlaying another base image. The idea here is that it cycles visibility continously, fading in quickly, displaying for a longer interval, fading out quickly, and remaining invisible for an equal longer interval, basically replicating the behavior of an animated GIF from back in the day. The png starts with display set to none.
My problem is jQuery doesn't seem to have a "pause" or "delay" event handler to help here. There are numerous plugins filling the gap, but I'd rather not include one if there's a simple way that I'm missing. That might require falling back on setInterval or setTimeOut, but I'm uncertain of the syntax to do that.
What I want schematically is something like:
--loop start--
$("#pngOverlay").fadeIn(1000);
(5000 delay) // using setTimeout or setInterval if jQuery method unavailable
$("#pngOverlay").fadeOut(1000);
(5000 delay)
--loop repeat--
The following does the behavior once, so I guess if this could be wrapped in a loop it might work, but it doesn't strike me as elegant or the right way.
setTimeout(function() {
$("#pngOverlay").fadeIn(1000);
}, 5000);
setTimeout(function() {
$("#pngOverlay").fadeOut(1000);
}, 10000);
Thanks for any suggestions. I would just use GIFs, but need the transparency for this. (In the old days, we used animated GIFs and we liked them...)
<script language="JavaScript" type="text/javascript">
function showimage(){
$("#pngOverlay").fadeIn(1000);
setTimeout('hideimage()',5000);
}
function hideimage(){
$("#pngOverlay").fadeOut(1000);
setTimeout('showimage()',5000);
}
$(document).ready(function() {
showimage();
});
</script>
Something like this?
setInterval(function()
{
var elm = $('#pngOverlay');
if (elm.is(':hidden'))
elm.fadeIn(1000);
else
elm.fadeOut(1000);
}, 5000);
How about using an animated PNG?
One trick I have seen is to have jQuery carry out an animation for 5000 milliseconds that has no visible effect.
$("#pngOverlay").animate({opacity:1}, 5000);
If the opacity of the item was 1 to start with then it does not have a visible effect but it does pause for 5 seconds.

Categories

Resources