i would like to ask how can I add smooth slide-in animation when button is hovered? This is a working code but it does not have smooth slide in or out. THank you for your help.
<script>
$(document).ready(function(){
$(".holding-btn").hover(function() {
$(".advisory .kn--child-1.show-on-hover--1").show();
$(".advisory .kn--child-2.hide-on-hover--1").hide();
}, function () {
$(".advisory .kn--child-1.show-on-hover--1").hide();
$(".advisory .kn--child-2.hide-on-hover--1").show();
});
});
</script>
<script>
$(document).ready(function(){
$(".advisory-btn").hover(function() {
$(".holding .kn--child-1.show-on-hover--2").show();
$(".holding .kn--child-2.hide-on-hover--2").hide();
}, function () {
$(".holding .kn--child-1.show-on-hover--2").hide();
$(".holding .kn--child-2.hide-on-hover--2").show();
});
});
</script>
Related
Here's my jsfiddle. The script itself is here:
$(function () {
$(".div1, .div2").hide();
$(".link1, .link2").bind("click", function () {
$(".div1, .div2").hide();
if ($(this).attr("class") == "link1")
{
$(".div1").show();
}
else
{
$(".div2").show();
}
});
});
How can I add smooth fadein effect when one div disappears and the other one shows up? Thanks!
$(".div1").fadeIn();
$(".div2").fadeOut();
Running example:
$(function () {
$(".div1, .div2").hide();
$(".link1, .link2").bind("click", function () {
var e = $(this);
$(".div1, .div2").fadeOut().promise().done(function() {
if (e.attr("class") == "link1"){
$(".div1").fadeIn();
} else {
$(".div2").fadeIn();
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Link 1
Link 2
<div class="div1">I'm div1</div>
<div class="div2">I'm div2</div>
The promise() is used to avoid the collision between fadeOut and fadeIn transitions
It looks like you need the fadeIn() method from jQuery, as explained in the docs:
The .fadeIn() method animates the opacity of the matched elements. It is similar to the .fadeTo() method but that method does not unhide the element and can specify the final opacity level.
if ($(this).attr("class") == "link1") {
$( "#div1" ).fadeIn( "slow", function() {
// Animation complete
});
} else {
$( "#div2" ).fadeIn( "slow", function() {
// Animation complete
});
}
Instead of slow you can also use a number for indicating the fade-in time, in milliseconds.
updated your fiddle.
simply replace show() with fadeIn()
http://jsfiddle.net/cEJtA/572/
<script>
$(function() {
$('#error').delay(1000).fadeOut(1000).slideUp();
});
</script>
I got part of it working, however it doesn't slide up after it has faded out.
EDIT:
I want the content below this div to slide after the div has faded out.. Code:
$(function() {
$('#error').delay(3000).fadeOut(2000).animate({
opacity: 0
}, "slow", function(){
$(this).slideUp();
});
});
it's still going up fast.
http://jsfiddle.net/XhXDq/3/
jQuery("#outer").animate({opacity: 0}, 1000).slideUp();
You first fadeout the element with animate, than on the callback (when the fade is completed), you do the slideUp.
$(function() {
$('#error').delay(1000).animate({opacity: 0}, 100, "linear", function() {
$('#error').slideUp();
});
});
Example: http://jsfiddle.net/4HT25/
Use fadeTo instead. To zero
<script>
$(function() {
$('#error').delay(1000).fadeTo(1000, 0).slideUp();
});
</script>
I have the following code http://jsfiddle.net/largan/2n2Lf/25/
The idea is the div called soc_text to fade and fade out when hover on the soc_button div.
I have this script, but it doesn't seems to work.
$(document).ready(function()
{
$("div.soc_button").hover(
function () {
$("div.soc_text").fadeIn('slow');
},
function () {
$("div.soc_text").fadeOut('slow');
}
);
});
Any ideas?
Thanks
$(document).on("mouseover", "div.soc_button", function(){
$(this).find("div.soc_text").fadeToggle("slow");
});
Here's the answer:
$(document).ready(function () {
$("div.soc_button img").hover(
function () {
console.log();
$(this).parent().find('div.soc_text').fadeIn('slow');
},
function () {
$(this).parent().find('div.soc_text').fadeOut('slow');
}
);
});
I guess the code is self explanatory,
Regards
This applies the method to all matches with all div tags with soc_text css class
$("div.soc_text").fadeIn('slow');
Change this to
$(this).children('div.soc_text').fadeIn('slow');
Hello I have two divs that fadeToggle with a timer as follows
<div id="div1">Hello</div>
<div id="div2" style="display:none;">World</div>
Javascript to make it toggle
$(document).ready(function(){
setInterval(ToggleDiv, 5000);
});
function ToggleDiv(){
$('#div1').fadeToggle("slow");
$('#div2').fadeToggle("slow");
}
Here is fiddle link http://jsfiddle.net/BnYat/
My issue is that the second div shows up before the first div is done toggle and then causes a jump up to the top.
If there a way to create a smooth transition from one div to the next without the jump effect happening?
A simple solution is to put both div elements in a single container, and position them absolutely:
<div id="container">
<div id="div1">Hello</div>
<div id="div2" style="display:none;">World</div>
</div>
#container div {
position: absolute;
}
Example fiddle
Alternatively, you could fade one out completely then fade the next in in the callback:
setInterval(ToggleDiv, 5000);
function ToggleDiv(){
$('#div1').fadeToggle("slow", function() {
$('#div2').fadeToggle("slow");
});
}
Example fiddle
$(document).ready(function(){
setInterval(ToggleDiv, 5000);
});
function ToggleDiv(){
$('#div1').fadeToggle("slow", function(){
$('#div2').fadeToggle("slow");
});
}
just use animate
$( "#div1" ).animate({
visibility:hidden
}, 5000, function() {
// Animation complete.
});
$( "#div2" ).animate({
visibility:visible
}, 5000, function() {
// Animation complete.
});
Try this
setInterval(ToggleDiv, 5000);
function ToggleDiv() {
var div = "#" + $('div:visible').attr('id');
var div2 = "#" + $('div:not(:visible)').attr('id');
$(div).fadeToggle("slow", function () {
$(div2).fadeToggle("slow");
});
}
DEMO
or
function ToggleDiv() {
if ($('#div1').is(':visible')) {
$('#div1').fadeToggle("slow", function () {
$('#div2').fadeToggle("slow");
});
} else {
$('#div2').fadeToggle("slow", function () {
$('#div1').fadeToggle("slow");
});
}
}
DEMO
I am using the following javascript code for the drop-down menu. It has come default with the template. Now I want to remove the slide up option as it flickers a lot. I want that menu just fades out or simply hidden after the mouse-out.
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j('.menu-nav li').hover(
function() {
$j(this).addClass("active");
$j(this).find('.ulwrapper').stop(false, true).slideDown();
$j(this).find('.ulwrapper .ulwrapper').stop(false, true).slideUp();
},
function() {
$j(this).removeClass("active");
$j(this).find('div').stop(false, true).slideUp();
}
);
$j('.ulwrapper').hover(function() {
$j('.parent').addClass("active_tab");
}, function() {
$j('.parent').removeClass("active_tab");
});
});
</script>
Will really appreciate the solutions.
function() {
$j(this).addClass("active");
$j(this).find('.ulwrapper').stop(false, true).slideDown();
$j(this).find('.ulwrapper .ulwrapper').stop(false, true).fade();
},
function() {
$j(this).removeClass("active");
$j(this).find('div').stop(false, true).fade();
}
Hope this helps :-)