CODEWITHSUNDEEP
jqueryhtmlcsshover
Alex
Alex

Reputation: 21

jQuery .fadeTo add element

Im trying to add a small .fadeTo effect on a small div object in my work but unsure if i can and where to add it. i want to add this effect to all of the divs. I would like it to .fadeTo (500)

This is a link to my jsfiddle:

$(document).ready(function() {
    $('div').bind("mouseenter", function(){
        var color  = $(this).css("background-color");


        $(this).css("background", "#53b9ab");


        $(this).bind("mouseleave", function(){
            $(this).css("background", color);

        })    
    })    
})

the effect I'm looking for is going to be used for social media icons the exact effect i want can be found on these social media icons http://www.coletownsend.com

Upvotes: 2

Views: 126

Answers (3)

Ionică Bizău
Ionică Bizău

Reputation: 113355

You can use .animate jQuery function.

Description: Perform a custom animation of a set of CSS properties.

See this exapmle.

I've edited your code. See the result here, and check the HTML and Javascript code.

This is jQuery code:

var color;
var fadeTime = 200;

$('div').bind("mouseenter", function(){
    color  = $(this).css("background-color");
    $(this).animate({backgroundColor: "#53b9ab"}, fadeTime);
});

$("div").bind("mouseleave", function(){
    $(this).animate({backgroundColor: color}, fadeTime);           
});

Upvotes: 1

Swarne27
Swarne27

Reputation: 5747

If I understand your question correctly, you need to apply it to hover function,

$("div").hover(function(){
    $("div").css("background-color", "orange").fadeIn("slow");
}, function() {
    $("div").css("background-color", "lime").fadeOut("slow");
});

according to your code you may adjust it like the following,

$(document).ready(function() {
     $('div').bind("mouseenter", function(){
            var color  = $(this).css("background-color");
            $(this).css("background", "#53b9ab").fadeIn('slow', 0.7); 
            $(this).bind("mouseleave", function(){
                $(this).css("background", color).fadeTo('slow', 0.5); // partial fading
            });    
        });   
});

Upvotes: 0

Emmet B
Emmet B

Reputation: 5531

By adding those 2 lines to your existing code, you can achieve it, if I understood correctly what you want.

$(document).ready(function() {
    $('div').bind("mouseenter", function(){
        var color  = $(this).css("background-color");

      $(this).css("background", "red");
      $(this).css("opacity", 0);  
      $(this).fadeTo(500,1);


    })    
})

Upvotes: 0

Related Questions