Jquery effect like Disjointed Rollover ……

[autodefrost]

I’ve looked everywhere and tried one to many tutorials…so I’m asking for help :)

I have a site, with Disjointed CSS rollover text – works, ok – not as sexy as Jquery.

Here’s an example: http://alt-web.com/DEMOS/CSS-Disjointed-Text-Rollover.shtml

I’m trying to find a Jquery effect/tutorial/something in the correct direction, like this: http://www.iamkreative.co.uk/jquery/panel.html

Basically, I have 5 to 8 bullets, for each bullet there is a small paragraph that I would like to appear the right of the bullet.
Same effect as the Disjointed Rollover, but with the sexy feel of Jquery.

Any help would be GREATLY appreciated.

[joshuanhibbert]

I’m have only just started learning JS/jQuery so I would love some feedback from those more experienced, but how is this: http://jsfiddle.net/joshnh/cbErf/

[sliver37]

I also just started learning, taking @joshuanhibbert’s example, mine would have looked something similar to this:

http://jsfiddle.net/sliver37/HSB9h/

If it doesn’t work, It’s because I haven’t used fiddle until now, will work it out eventually.

Also quick question for you @joshuanhibbert, instead of using an == with just return true, couldn’t you just have != and remove the else?

listItemHeader.click( function() {

if($(this).parent('li').attr('class') != 'active') {

list.find('.active').removeClass().children('p').fadeOut();

$(this).parent('li').addClass('active').children('p').fadeIn();

}

});​

As I said, also learning so not sure if it matters, would like to hear others input :)

[joshuanhibbert]

@sliver37 Yes, yes I could have, but as a jQuery noob I did not think of that. Thanks!

[Mottie]

Since you asked, this is how I would modify @joshuanhibbert’s version

var list = $('ul'),

listItemHeader = list.find('h1');



listItemHeader.click( function() {

if (!$(this).parent().hasClass('active')) {

list.find('.active').removeClass().children('p').fadeOut();

$(this).parent().addClass('active').children('p').fadeIn();

}

});

Don’t look at the class attribute as other scripts may add class names and thus break the script functionality. You can use .hasClass() (returns boolean), .filter() (returns objects) or .is() (returns boolean) to check class names – I like to use .is(), it’s a tiny bit slower, but I like to use it.

And this is how I’d modify @silver37’s version

var list = $('ul li'),

listItemHeader = list.children('h1');



listItemHeader.hover(function() {

$(this).parent('li')

.addClass('active').children('p').fadeIn();

}, function(){

list

.removeClass('active')

.children('p').stop(true, true).fadeOut();

});

There is no need to do wrap the list ($(list)) since it is already a jQuery object.

[joshuanhibbert]

Awesome, thanks for that @Mottie, you just taught me something!

[sliver37]

Yes, thanks @Mottie for taking the time to re-factor our code and providing some nice advice. It really does help getting feedback from the pro’s.

Hope this thread has helped you find your answers, @autodefrost. ;)

[Author]

Posts