I try to make a image fadeIn effect, I set jQuery animate method to implement fade-in effect, and I found the hover event which I register in CSS have been cancelled.
I think it's weird, the method should not affect my hover effect.
Although I can re-register hover event by javascript, but it is doing an other task
Is anything I misunderstanding?
P.S. I'm trying to not to use CSS3 animation.
JS part:
$('img').animate({
'opacity': '0.5'
}, 1500);
CSS part:
img {
opacity: 0;
}
img:hover {
opacity: 1;
}
http://jsfiddle.net/aSRMR/
Use !important in css that will solve the problem
img:hover {
opacity: 1 !important;
}
Working Fiddle
You could use hover instead.
$('img').hover( function (){
console.log('hovered in');
}, function (){
console.log('hovered out');
}
Don't forget to put stop() before you do an animate.
so trying your code will look like this.
$('img').hover( function (){
console.log('hovered in');
$('img').stop().animate({'opacity': '1'}, 1500);
}, function (){
console.log('hovered out');
$('img').stop().animate({'opacity': '0.5'}, 1500);
}
Another solution, if you want to do a CSS approach, do it like this.
$('img').hover( function (){
$('img').addClass('hovered');
}, function (){
$('img').removeClass('hovered');
}
on your CSS.
img {
opacity: 0;
}
.hovered {
opacity: 1;
}
Have you also considered fading using CSS Webkit?
Related
This is my CSS:
.animated {
transition: 1s;
left: -400px;
}
I want to element after it class name has been set to .animated. and after it finish the transition I want to fire a function. Can someone please suggest me the idea?
You can use transitionEnd event, it's fired when a CSS transition has completed:
function showMessage() {
alert('Transition has finished');
}
var element = document.getElementById("animated");
element.addEventListener("transitionend", showMessage, false);
DEMO
I would like to make a function run the moment a person loads my page. No interactivity. The function is loading when someone clicks. I also would like to make the function loop after 1 minute and a half. I tried replacing "click" for window.onload and body.onload but as you may have noticed by now I am a true begginer with javascript. Can someone give me a hand please. For now all I have is this:
// Animate an element by adding a class to it:
// Paramaters:
// anim: the class name to add
// time: animation duration (optional, fallsback to the class)
// cb: an optional callback function to happen once the animation ends
$.fn.animatecss = function(anim, time, cb) {
if (time) this.css('-webkit-transition', time / 1000 + 's');
this.addClass(anim);
if ($.isFunction(cb)) {
setTimeout(function() {
// Ensure that the element is available inside the callback.
$(this).each(cb);
}, (time) ? time : 5000);
}
return this;
};
$(document).ready(function() {
$('.box')click(function() {
$(this).animatecss('blur-out', 5000, function() {
console.log('callback');
});
});
});
.blur-out {
-webkit-filter: blur(8px);
-webkit-transform: scale(1.4, 1.4);
-webkit-transition: all 5s ease-out;
transition: all 5s ease-out;
visibility: hidden;
}
.box {
background:#fff;
margin: 80px;
padding: 20px;
}
<div class="box">
<img src="http://companionplants.com/images/small-plant2.jpg">
</div>
$(document).ready(function() {
$('.box').click(function() {
$(this).animatecss('blur-out', 5000, function() {
console.log('callback');
});
});
// add this line
$('.box').trigger('click');
});
Reference: http://api.jquery.com/trigger/
If I understood correctly, You want to start animation automatically after page is loaded.
Remove event handler for click. Leave code for animation like this:
$(document).ready(function() {
$('.box').animatecss('blur-out', 5000, function() {
console.log('callback');
});
});
For automatically repeating this code, you need to place this code in recursive function with settimeout().
$(document).ready(function() {
function animate(){
$('.box').animatecss('blur-out', 5000, function() {
console.log('callback');
});
setTimeout( animate(), 60000);
}
animate();
});
I hope that there are no errors, I cann't check it now, but I think it will help you
I have a menu with categories,
when I hover on a category a drop down show up
(I have already delayed the drop down to show up after 600 MS),
I want to know how to delay the hover event on the category too for 600 MS,
What is the best way and easiest way to achieve this using jquery?
jQuery('div.dropdown').hover(function() {
jQuery(this).find('.services-shortcut').addClass('active');
jQuery(this).find('.dropdown-menu').stop(true, true).delay(600).fadeIn(0);
}, function() {
jQuery(this).find('.services-shortcut').removeClass('active');
jQuery(this).find('.dropdown-menu').stop(true, true).delay(600).fadeOut(0);
});
I have made a bootply here http://www.bootply.com/lXioubaMre
You could use a basic CSS transition
.services-shortcut {
transition: all 0s .6s;
}
that runs immediately after a 600ms delay
Example: http://www.bootply.com/xppQzbvQ3P
If you choose to do this effect absolutely in javascript (but I wouldn't do it, just to keep off style from javascript) then apply the active class after a 600ms timeout, e.g.
jQuery('div.dropdown').hover(function() {
var $this = $(this);
setTimeout(function() {
$this.find('.services-shortcut').addClass('active');
}, 600);
$this.find('.dropdown-menu').stop(true, true).delay(600).fadeIn(0);
}, ...
If you use this approach then you should also clear the interval onmouseout
You can use hoverIntent jQuery plugin, which triggers functions based on client mouse movement. In your case the script would be simple, you can take a look at this Bootply:
function showMenu(e) {
jQuery(this).find('.services-shortcut').addClass('active');
jQuery(this).find('.dropdown-menu').show();
};
function hideMenu(e) {
jQuery(this).find('.services-shortcut').removeClass('active');
jQuery(this).find('.dropdown-menu').hide();
};
$("div.dropdown").hoverIntent({
over: showMenu,
out: hideMenu,
sensitivity: 3,
timeout: 800
});
$(".dropdown-menu a").hoverIntent({
over: function(){
$(this).addClass('active')
},
out: function(){
$(this).removeClass('active')
},
sensitivity: 3
});
I would use $.hoverDelay() plugin that does exactly that. It lets you configure the delay(s) for the 'in' and 'out' events like so:
$('div.dropdown').hoverDelay({
delayIn: 200,
delayOut:700,
handlerIn: function($element){
$element.css({backgroundColor: 'red'});
},
handlerOut: function($element){
$element.css({backgroundColor: 'auto'});
}
});
You can simply use jQuery.delay() method :
jQuery('div.dropdown').hover(function() {
alert("Action delayed");
jQuery(this).find('.services-shortcut').addClass('active');
jQuery(this).find('.dropdown-menu').stop(true, true).delay(600).fadeIn(0);
}, function() {
jQuery(this).find('.services-shortcut').removeClass('active');
jQuery(this).find('.dropdown-menu').stop(true, true).delay(600).fadeOut(0);
}).delay(600);
.dropdown{
background-color:red;
]
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="dropdown">
aaaa
</div>
That will wait for 600ms before executing your action, that's all you need.
How to make this button pulsate on jQuery mobile?
Are there problems with jQuery mobile because in my main application on some divs I can apply this pulsating effect and on other they just flicker, or fade in and out with interruptions or it jerky fades in and out.
html:
<button id="pulsate">I want to pulsate!</button>
JS:
$('#pulsate').on('click', function () {
pulsate("#pulsate");
});
function pulsate(element) {
$(element || this).animate({ opacity: 0 }, 500, function() {
$(this).animate({ opacity: 1 }, 500, pulsate); });
}
http://jsfiddle.net/alecstheone/zCUSK/
I only use jquery and jquerymobile... I noticed that if I disable jquerymobile in jsfiddle it works but I dont want this as I use jquerymobile in my application for other things...
Your code works fine but you've to make some changes to your script, As you're having a click event on the button but using jQuery mobile your button is wrapped around with span and divs(mainly because of jquery mobile css),
So you just have to traverse through that target div with .closest() to set your animation effect. Below is the small demo of your code with the desired effects.
$('#pulsate').on('click', function () {
pulsate(this); // Change here
});
function pulsate(element) {
$(element || this).closest("div.ui-btn").animate({
opacity: 0
}, 500, function () {
$(this).closest("div.ui-btn").animate({
opacity: 1
}, 500, pulsate);
});
}
Fiddle Example
I'm working on a small bit of functionality for three similar tabbed items. Basically, when you hover over one, I want the opacity of the two siblings to go to 50%. I set up a pretty basic jQuery hover event, here's the page code...
<div id="footer">
Seek
Experience
Gain
</div>
...and the corresponding JS:
$('.footer-tabs').hover(
function () {
$(this).siblings().animate({ opacity: .5 },500);
},
function () {
$(this).siblings().animate({ opacity: 1 },500);
}
);
When you hover onto one everything works great, but when you hover from one to the other the siblings don't dim simultaneously. I did a quick screencast for reference. I'm sure there's a simple way to make it work properly, but I'm at a loss for it. Thanks in advance.
Screencast: http://dl.dropbox.com/u/1762184/example.mp4
You want to cancel any in process animations on the siblings. This is what the stop() function is for.
$('.footer-tabs').hover(
function () {
$(this).siblings().stop().animate({ opacity: .5 },500);
},
function () {
$(this).siblings().stop().animate({ opacity: 1 },500);
}
);
Try this :
$('.footer-tabs').hover(
function () {
$(this).siblings().animate({ opacity: .5 },"fast");
},
function () {
$(this).siblings().animate({ opacity: 1 },"fast");
}
);