1

I'm working with cookies to run or not run a jQuery animation someone else built:

 $(function () {
     $('div.transitional').click(function () {
         $('div.intro').removeClass('hidden');
         $('div.final').off('click');
     });

     ShowDiv($("div.transitional.hidden")[0]);
 });

 function ShowDiv(target) {
     target = $(target);
     target.removeClass('hidden');

     target.delay(500).animate({
         opacity: 1.0
     }, 300, 'easeInExpo', function () {
         ShowDiv($("div.transitional.hidden")[0]);
     })
 }

I have the cookie part working, but I'm confused about the anonymous function and the "ShowDiv" function.

What is each part doing?

Functionally, the animation makes visible a series of pictures, then the whole site. I want to skip the animation and just make the whole site visible (if cookies='visited'.) I'd like to do this without rewriting the animation script.

Here's a link: http://claytonsalem.com/bottlecap.

What happens now is if you have the cookie the animation doesn't run and everything is hidden.

2
  • Your link is behind a security login... Please stick the relevant parts in a JSFiddle. Jun 3, 2014 at 15:24
  • $(function () { is just a shortcut for $(document).ready(function(){ Jun 3, 2014 at 15:32

2 Answers 2

0

That script only fades in elements, one after the other. If you want to skip that, use something like this in the anonymous function (which is also known as a DOM ready handler) :

$(function() {
    $('div.transitional').click(function() {
        $('div.intro').removeClass('hidden');
        $('div.final').off('click');
    });

    if(cookies === "visited") //Assuming you already have the variable set.
        ShowDiv($("div.transitional.hidden")[0]);
    else
        $("div.transitional.hidden").css('opacity', 1).removeClass('hidden')
});
0

I will focus on how it works:

$("div.transitional.hidden")

This would select ALL elements with div.transitional.hidden, placing them in a list.

By placing [0] in the selector, we are picking ONLY the first element in this list.

Then, when the script begins to run, this element is modified by target.removeClass('hidden'), which removes the hidden class.

When the scripts ends, it calls the $("div.transitional.hidden")[0] selector again, but this time it will not include the previously selected element (because it no longer has the hidden class).

That's why the script show images one after the other: it removes the hidden class and selects the next remaining element.

You might refer to Karl's answer on how to show your whole site.

3
  • 1
    I'll work on a jsfiddle version. Thanks for the explanation of the Showdiv function. I get now why it calls itself, it's like it's looping through until there's nothing in the div.transitional.hidden list. However, I'm not sure what's happening in the anonymous function with the .click method. Why is that called? The animation runs without any interaction with the site except for reloading.
    – icicleking
    Jun 4, 2014 at 16:52
  • Are you referring to the anonymous function in the upper level itself, or the function inside the click event?
    – lfarroco
    Jun 5, 2014 at 16:17
  • inside the click event. why or what .off('click') i probably need to recreate this in jsfiddle b/c there seems to be no clicking in the animation, it just runs on loading the page.
    – icicleking
    Jun 6, 2014 at 19:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.