开发者

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 :(


Try this:

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

slow should be a string


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.

and more.. in general you should strive for valid html. Validators can help you, such as http://validator.w3.org/check?uri=http%3A%2F%2Fmashup2.sunnydsouza.com%2Findex3.php&charset=%28detect+automatically%29&doctype=Inline&group=1&verbose=1&user-agent=W3C_Validator%2F1.2


If that is a direct copy of the code, you need to put "slow" in quotes in the slideUp/down functions.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜