Reputation: 626

Problem in slideDown() and slideUp() effect in jQuery

I want a slidedown and slideup effect on a particular div when you hove on corresponding <li> tag. You can check it live at this link http://mashup2.sunnydsouza.com/index3.php

Am using the following jQuery to solve it

$(".altbgcolor").mouseenter(function() {
                $(this).css("background-   color","#D3EAC7").find(".newsthumb").corner();
                $(".newstext h1",this).css("color","#000");
                $(".newstext div",this).css("color","#000"); 
                $(".sharedp").slideDown(slow);

            }).mouseleave(function () {
                $(this).css("background-color","#f5f5f5").find(".newsthumb").corner();
                $(".altbgcolor:even").css("background-color","#f0f0f0");
                $(".newstext h1",this).css("color","#666666");
                $(".newstext div",this).css("color","#666666"); 
                $(".sharedp").slideUp(slow);
            });

Am I doing something wrong. Can someone just check the site html and see where am going wrong. I am in this big dilemna here :(

Upvotes: 3

Answers (3)

Gabriele Petrioli

Reputation: 195982

put the slow in quotes..

$(".sharedp").slideDown('slow');

and

$(".sharedp").slideUp('slow');

Update

To limit the slideUp/Down to the next .sharedp element use

$(".altbgcolor").mouseenter(function() {
                $(this).css("background-color","#D3EAC7").find(".newsthumb");
                $(".newstext h1",this).css("color","#000");
                $(".newstext div",this).css("color","#000"); 
                $(this).next(".sharedp").slideDown('slow');

            }).mouseleave(function () {
                $(this).css("background-color","#f5f5f5").find(".newsthumb");
                $(".altbgcolor:even").css("background-color","#f0f0f0");
                $(".newstext h1",this).css("color","#666666");
                $(".newstext div",this).css("color","#666666"); 
                $(this).next(".sharedp").slideUp('slow');
            });

You will notice that i have removed the .corner method which seemed to be causing a silent failure of the script...

Also it would be better in terms of speed and maintenance if you created classes that describe the styling you want, and just used jquery to add/remove these classes..

Some of the Errors found

title="Traffic Exchange"" should have a single ending "
ID's of elements that are numeric. Only HTML5 allows for numeric IDs, otherwise look at the specs http://www.w3.org/TR/html4/types.html#h-6.2
duplicate IDs. IDs should be unique in the document.
<div class="newsthumb" center center no-repeat;"> the center center no-repeat;" should not be there
You have div elements under a ul which is invalid. Only li and other ul elements can go under a ul, there rest should be inside the li.