Question

I’m pretty new to JavaScript, this is one of my first scripts.

basically i am trying to create a script that turns a grid based news list into a list based news list. i got it all working great when had both

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

but i have removed the ui script as i dont really need it (i think)

and now my script isn’t functioning properly. My Script is

//Javascript Start 

//SETTINGS
var settings = {
    //Header Slider Settings
    listBtn: 'input.toggle',
    listItem: '.wrapper ul',
    listStyleOne: 'listNews-tiled',
    listStyleTwo: 'listNews-list',
    fadeSpeed: 300
}

function NewsListSwitcher() {
    $(settings.listBtn).click(function () {
        //If News List has a certian class
        if ($(settings.listItem).hasClass(settings.listStyleOne)) {
            //Fade Out and remove Class
            $(settings.listItem).fadeOut(settings.fadeSpeed,
                function () {
                    $(settings.listItem).removeClass(settings.listStyleOne);
                }
            );
            //Add Class and Fade In
            $(settings.listItem).addClass(settings.listStyleTwo,
                function () {
                    $(settings.listItem).fadeIn(settings.fadeSpeed);
                }
            );
            //Change background Position Of List Button
            $(settings.listBtn).css("background-position","bottom");
        }
        else {
            //Fade Out and remove class
            $(settings.listItem).fadeOut(settings.fadeSpeed,
                function () {
                    $(settings.listItem).removeClass(settings.listStyleTwo);
                }
            );
            //Add Class and Fade In
            $(settings.listItem).addClass(settings.listStyleOne,
                function () {
                    $(settings.listItem).fadeIn(settings.fadeSpeed);
                }
            );
            //Change background Position Of List Button
            $(settings.listBtn).css("background-position","top");
        }
    });
}
//Javascript End

my html is just a basic list

<div class="wrapper">
    <input type="submit" class="toggle" value="">
    <hr />
    <ul class="listNews-tiled">
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>

what is happening is when i click my icon, the script removed listNews-tiled class and adds listNews-List class, but it also adds display block: none; which i dont want.

If you could help that would be amazing.

Link to Preview
http://www.psykestudios.co.uk/News%20List-Grid%20selector/

Answer 1

jQuery.addClass doesn’t support finish callback (as opposed to fadeIn or fadeOut) like you apparently think. Meaning code like: $(body).addClass('example', function() {...}) won’t run the function once the class is added. The class is added instantly. Documentation states that function may be passed to addClass but it is expected of it to return string that will be added as class name.

As a fix, replace parts when you pass function to addClass with something like:

$(settings.listItem).addClass(settings.listStyleTwo).fadeIn(settings.fadeSpeed);

Edit:
Hah, there was much more to this question than I originally thougth.

I checked, and the reason behind the difference (of version with jQueryUI vs without it) is actually implementation of addClass function. With regular (plain) jQuery, the situation with addClass is as I described above, whereas with jQueryUI it is quite different. As described here, jQueryUI overrides addClass function and enables it to animate transition between state without and with given class name. That’s why after attaching jQueryUI you get smoother animation, because you don’t only animate with fadeIn/Out but also animate state by simply using addClass with callback.

So to sum up. If you want to get rid of jQueryUI stick to code I pasted above. If you want smoother animation, embed jQueryUI. If your concern with jQueryUI is its size, create yourself custom download and pick just a part which gives you new version of addClass function (so presumably the core will suffice).