jQuery smooth transition between div loading?

Question

I've got that little piece of jQuery to load a htm file into div after you hover your mouse over a button. Here's how it looks like:

        $(document).ready(function () {
        $('#webd').mouseenter(function () {
            $('#opis').load('portfolio/webdDescription.htm');
            }
            );
        $('#webd').mouseout(function () {
            $('#opis').load('portfolio/defaultDescription.htm');
            }
            );
    });

Is there any way to make those transitions smooth? Like when you hover your mouse over button, the default text fades out and meanwhile another one fades in?

you can use .animate() or .fadeIn() , .fadeOut()

Drixson Oseña
– Drixson Oseña

2013-11-22 21:43:21 +00:00
Commented Nov 22, 2013 at 21:43 — Drixson Oseña
– Drixson Oseña, Commented Nov 22, 2013 at 21:43
I tried, where exactly should I put it?

user2660811
– user2660811

2013-11-22 21:50:19 +00:00
Commented Nov 22, 2013 at 21:50 — user2660811
– user2660811, Commented Nov 22, 2013 at 21:50

Drixson Oseña · Accepted Answer · 2013-11-23 00:38:45Z

1

If you want to add some smooth transition in your load content , you can add fadeIn() and be something like this:

$('#webd').hover(function () {

  $('#opis').load('portfolio/webdDescription.htm', function(){
    $(this).css('opacity',0).stop().animate({"opacity": 1}); });

},
 function(){
 $('#opis').animate({'opacity' :0}); $('#opis').load('portfolio/defaultDescription.htm',   function() {
    $(this).stop().animate({"opacity": 1}); });
}
);

edited Nov 23, 2013 at 0:38

answered Nov 22, 2013 at 22:04

Drixson Oseña

3,6313 gold badges25 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

user2660811 Over a year ago

this is similar to what I've tried before, it doesn't work either. It just instantly switches to another htm and that's it.

Drixson Oseña Over a year ago

does #opis has a style of display:none?

user2660811 Over a year ago

no, it doesn't. I don't think I want it to be display:none, because I got a little code before to load default content into #opis: jQuery('#opis').load('portfolio/defaultDescription.htm');

user2660811 Over a year ago

awesome, now it looks good :) but when you mouseover it instantly disappears, then nicely fades in. How can I add fade out?

Drixson Oseña Over a year ago

@user2660811 , added fadeOut() in mouseleave event to achieve what you want :)

|

A. Cristian Nogueira · Accepted Answer · 2013-11-22 23:03:25Z

0

You can just use a "trick" to hide the content you've loaded and then apply a jQuery smooth effect to show it back.

Something like that:

$(document).ready(function () {
    $('#webd').mouseenter(function () {
        $('#opis').load('portfolio/webdDescription.htm');
        $('#opis').hide();
        $('#opis').show("fade", 200);
    });
    $('#webd').mouseout(function () {
        $('#opis').load('portfolio/defaultDescription.htm');
        $('#opis').hide();
        $('#opis').show("fade", 200);
    });
});

Should work.

answered Nov 22, 2013 at 23:03

A. Cristian Nogueira

7351 gold badge8 silver badges26 bronze badges

2 Comments

user2660811 Over a year ago

Code looks nice, but when I hover mouse over the button the defualt content disappears.

Phortuin Over a year ago

try mouseleave instead of mouseout?

Phortuin · Accepted Answer · 2013-11-22 23:52:17Z

0

Add some HTML containers for the default and web description, make those containers invisible by default, load the html files, then fadein/out on hover.

UPDATE

I removed all the old code/examples, this is probably going to work a lot better and is easier to expand:

$(function(){ 
    var el = $("#opis");
    el.load("portfolio/defaultDescription.htm").show();
    el.hover(function() {
        changeText(el, "portfolio/webdDescription.htm");
    }, function() {
        changeText(el, "portfolio/defaultDescription.htm");
    });
    function changeText(el, source) {
        el.fadeOut(function() {
            el.load(source, function() {
                el.stop().hide().fadeIn();
            });
        });
    }
});

edited Nov 22, 2013 at 23:52

answered Nov 22, 2013 at 22:05

Phortuin

7704 silver badges20 bronze badges

3 Comments

user2660811 Over a year ago

woah, thanks a lot. But I don't know if it's what I need. I've got few buttons (1 for now, I will add more later), and when you hover a button it changes content of a div, that's what I got so far. Now I want the transition to be soft.

Drixson Oseña Over a year ago

unfortunately there's a little bug.. try hover and unhover it again and again as many times see what happens

Phortuin Over a year ago

That's a silly bug indeed @DrixsonOseña, updated my fiddle jsfiddle.net/ceGDq/2 but it's starting to look worse by the minute. Christian might have the better answer

Collectives™ on Stack Overflow

jQuery smooth transition between div loading?

3 Answers 3

10 Comments

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

10 Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related