Geek asks and answers

JQuery: fadeout () does not work on an absolutely positioned element when loading via AJAX

I use AJAXify on the site I'm working on to achieve page transitions, and I experience weird behavior with jQuery.

My code is:

HTML (I fade through the background using jQuery)

<div id="backgrounds">
<img src="/assets/Uploads/hpbg3.jpg" alt="" class="bodybackground">
<img src="/assets/Uploads/hpbg2.jpg" alt="" class="bodybackground">
<img src="/assets/Uploads/hpbg4.jpg" alt="" class="bodybackground">
<img src="/assets/Uploads/hpbg5.jpg" alt="" class="bodybackground">
</div>

JQuery

$('.otherClass').each(function() {
        $('#backgrounds').fadeOut(function(){
                 alert('fade');
            });
});

$('#main .container.homepageClass').each(function() {
        $('#backgrounds').fadeIn();
});

CSS

#backgrounds {display: none; position: absolute; left: 50%; margin-left: -714px;}

My div disappears correctly when I load a page at a URL, and not a link to it via an AJAX link (and I get a warning), however, when I link to it through AJAXified navigation, it will happen, but I still get a warning. so the fadeOut () function definitely starts.

When I remove the absolute positioning from CSS and the link to the page via AJAX, my div disappears when I need it (and I get a warning). This seems to cause a problem with the absolute positioning of the div.

FadeIn() AJAX . fadeOut, .

?

+5
3

, div. Bizarre

+4

fadeout, , .. 5-10 . fadeout, css . , - Ajaxify, , .

, - , .

0

If you use AJAXify gist by Balupton (this is similar to what you are mentioning), then I will say that I "We ran into problems loading Javascript code through this meaning. You can verify that you load any Javascript at all with a script ? Try to include Javascript on each of your AJAXified pages, which does nothing more alert("hello");. If you don’t see the code, I would put your Javascript not even shoot. If this is the case, try this code, it worked for me:

$scripts.each(function(){
    var $script = $(this), scriptText = $script.text();
    scriptText = "<script>" + scriptText + "</script>";
    contentHtml += scriptText;
});
0
source

More articles:


All Articles