0

I'm looking for a way to fade from one piece of HTML in a div to another piece of HTML without fading out to white (to the background color of the div) first like i'm doing in this example:

The positionNumber variable is just an int with the number (e.g. 3).

function changeContent(positionNumber) {
    $('.banner-content-wrapper').fadeOut('fast', function() {

        var contentHtml = $('.slidercontent#' + positionNumber).html();

        $('.banner-content-wrapper').hide().fadeIn(1000).html(contentHtml);
    });
}

This example does the exact same by fading to white first but this is not what I'm lookig for: Why doesn't jquery fadeIn() work with .html()?

I want to fade directly from one piece of HTML to another. I haven't been able to find any example on Stack Overflow that shows how to do exact that. I know this is not valid code but it's something like this I'm looking for: $('.banner-content-wrapper').fadeToHtml(contentHtml);

How can I fade directly?

Community
  • 1
  • 1
154115
  • 3
  • 5

2 Answers2

1

why use fadeOut/fadeIn - why not hide/show

function changeContent(positionNumber) {
    $('.banner-content-wrapper').hide('fast', function() {

        var contentHtml = $('.slidercontent#' + positionNumber).html();

        $('.banner-content-wrapper').hide().html(contentHtml).show();
    });
}

I have not tested this - just a suggestion based on the example you referenced

richardwhitney
  • 506
  • 1
  • 6
  • 21
0

I don't think you should use fade. Try to use Replace.

http://api.jquery.com/replacewith/

mastahb
  • 91
  • 3
  • 10
  • Thank you for the example mastahb. It works but it doesn't fade unfortunately. I need it to fade. I'm doing it like this: `$(".banner-image-wrapper").replaceWith('');` – 154115 Mar 12 '15 at 08:12
  • And another example that doeesn't fade directly: http://jsfiddle.net/9Dubr/1/ Please help me figure out how to fade directly without fading to white (transparent) first – 154115 Mar 12 '15 at 08:33