jQuery click to fadeIn function not working - javascript

EDIT: Changed hover to click.
EDIT2: Ended up putting a 0.6 opacity copy div below it and applied the same animation and fadeOut to it, then made it fadeToggle on click which is working, but lags a bit. Any more efficient solutions are welcome!
I have a click function for a div element that's not working. I want the click to restore opacity to a previously faded element (that part works fine) but after hours of trying it's just not happening.
$(document).ready(function(){
$(document).scroll(function() {
$(".circle-nav-element-sm").animate({
left: '100px',
}, "slow");
$(".circle-nav-element-sm").fadeTo("slow", 0.6);
});
});
//Above part works fine.
$(document).ready(function(){
$(".circle-nav-element-sm").click(function() {
$(".circle-nav-element-sm").fadeIn("fast");
});
});
Can anyone see an obvious solution?

The jQuery fadeIn() method is used to fade in a hidden element.
At first make sure your circle-nav-element-sm div is hidden or not.If it is hidden it works for you if it is not please make sure it is hidden.

try using
$(document).ready(function(){
$(".circle-nav-element-sm").hover(function() {
$(".circle-nav-element-sm").fadeTo("fast",1);
});
});
I'm guessing fadeTo doesn't work well with fadeIn and fadeout
fadeIn vs fadeOut vs fadeTo

Related

Hide a div with opacity animate function

I am trying to hide a div with opacity animate function. Basically, I want the div to be hidden on click. But I want it to fadeout. Below is the code I have for it. can anyone help?
$("#div1").click(function() {
$(this).animate({ opacity: "0" }, 1000);
$("div").hide();
});
also, is it better to use fadeOut function instead of animate opacity?
fadeOut() is simpler because it will hide it for you automatically when it is done so you can save that code and it automatically waits for the animation to be done before hiding the element (something your current code was not doing).
$("#div1").click(function() {
$(this).fadeOut(1000);
});
Try this
JSFIDDLE
$("#div1").click(function() {
$(this).animate({ opacity: "0" }, 1000, function(){
$(this).hide();
});
});
Also you can use .fadeout(1000). to get same behavior.
You can use .fadeOut() API for this,
$("#div1").click(function() {
$(this).fadOut(1000);
});

jQuery animation only works once or twice?

I'm putting together a site where a client has requested a very specific animation in the quicklink scroller.
I've used jquery animate and jquery fadeIn to complete a glass-shine and glow effect on hover, but when hovered once or twice (partcularly if done in quick succession) it stops happening?
Link: http://clientzone.fifteenten.co.uk/visioncode/html
$('.fadehover').append('<div class="hover"></div>');
$('.fadehover').hover(
function() { $(this).children('div.hover').animate({"left": "+=505px"}, 300);},
function() { $(this).children('div.hover').css({left: "-=" + 505});
});
$('.fadehover a').hover(
function() { $(this).children('div.qlink_glow').fadeIn('fast')},
function() { $(this).children('div.qlink_glow').fadeOut('fast');
});
Any assistance would be hugely appreciated I'm so confused... I've had this happen on other hover effects too
Try .stop(true,true) before .animate, .fadeIn and .fadeOut
This error occurs on your element if you hover in before your last animation finished. A first attempt to me would be trying if it helps to stop the animation before beginning a new one:
$(this).children('div.qlink_glow').stop(true,true).fadeIn('fast');
I'll have to test it, can't say for sure if this will work, just a possibility you could try.

Show/hide controls on flexslider on hover?

I have a flex slider with prev/next arrows, pretty standard. I hide the arrows on the page load and only want them to appear when the user hovers over the carousel info.
Here's my code:
$(".flex-container.home ul.flex-direction-nav").hide();
$(".flex-container.home .flexslider").hover(
function(){
$(".flex-container.home ul.flex-direction-nav").fadeIn();
},
function(){
$(".flex-container.home ul.flex-direction-nav").fadeOut();
}
)
The problem now is that when the user actually hovers over the arrow itself, it fades out, since technically I'm asking it to do so. I've tried to add some !important css to the ul.flex-direction-nav css styles but it doesn't stop the fade out from happening.
Change your code to the following. I've modified your selectors and used fadeToggle() to save you writing extra code.
Here is the new version, which works how you specified you would like:
$(document).ready(function () {
$(".flex-container.home ul.flex-direction-nav").hide();
$(".flex-container.home").hover(function () {
$(" ul.flex-direction-nav").fadeToggle();
});
});
Here is a working jsFiddle.
pauseOnHover:true, //this option working good
below css solved the issue for me-
.big-slider .flex-direction-nav {opacity: 0 !important;}
.big-slider .flex-direction-nav:hover {opacity: 1 !important;}

jquery animate opacity sudden display instead of smooth

I'm trying to animate some tab contents I've made. It works smoothly when fading the content out, but fading it in doesn't. The content just appears suddenly instead of fading in.
Please check my code here: http://jsfiddle.net/rqsJ8/2/
I've tried everything I can think of, but I can't figure why this is happening.
Please enlighten me.
Many Thanks
http://jsfiddle.net/rqsJ8/25/
Changed to use fadeIn and fadeOut.
I have updated the version with a new code and saved it on fiddle and here is the link: http://jsfiddle.net/rqsJ8/61/
you didn't probably mention a time for speed..
tabContent.animate({ opacity: 0 }, function() {
$(this).removeClass('selected');
}, speed );

Jquery - fadeIn/fadeOut flicker on rollover

I am using the following code to acheive a fadeIn/fadeOut effect on rollover/rollout of it's parent div.
$('.rollover-section').hover(function(){
$('.target', this).stop().fadeIn(250)
}, function() {
$('.target', this).stop().fadeOut(250)
})
It works correctly when I rollover the div and out slowly. However if I move my mouse over and then off the div quickly, it breaks the effect. The target div seems to get stuck at an opacity between 0 and 1.
What confuses me is that when I use the following code it works perfectly.
$('.rollover-section').hover(function(){
$('.target', this).stop().animate({
opacity: 1
}, 250);
}, function() {
$('.target', this).stop().animate({
opacity:0
}, 250);
})
So, I have two questions.
1 - why is my first code block behaving as it does?
2 - What is the difference between fadeIn()/fadeOut() and animating the opacity?
As it was stated already it's because those modify the css and change the display to none. By using fadeTo you can get the same effect, but it doesn't modify the css, so it should work correctly.
update example: http://jsfiddle.net/TFhzE/1/
you can also do
$('.rollover-section').hover(function() {
$('.target', this).stop().fadeTo(0,250);
}, function() {
$('.target', this).stop().fadeTo(250,0,function(){$(this).hide();});
});
to completely hide it yourself once it actually is complete.
I've put my answer from the comments here:
Just use the animate example you have there. Check here for an answer to why the fade animation behaves the way it does:
jQuery fade flickers

Categories

Resources