Remy Sharp recently wrote a good article about this type of effect:

http://jqueryfordesigners.com/slide-out-and-drawer-effect/

Especially look at his example using the Accordion plugin:

http://jqueryfordesigners.com/demo/plugin-slide-demo.html


--Karl
_________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com



On Jan 19, 2008, at 1:13 PM, [EMAIL PROTECTED] wrote:


Look here is something interesting http://www.apple.com/iphone/ ( left
bottom)
I tried to make a script like that., but I have an animating problem.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd";>
<html>
<head>
 <script src="http://code.jquery.com/jquery-latest.js";></script>

 <script>
 $(document).ready(function(){
        all = $("#all > *");
                all.mouseover (
                        function() {
                                $(".curent").animate({height:'100px'});
                                $(this).animate({height:'200px'});
                                all.not(this).attr("class","cel");
                                $(this).attr("class","curent");
                        }
                );

 });
 </script>
 <style>
        .cel {
                background:#7D7D7D;
                height:100px;
                width:100px;
                border:1px solid black;
        }
        .curent {
                background:#969696;
                width:100px;
                border:1px solid black;
        }
 </style>
</head>
<body>
        <div id="all">
        <div class="cel">
        div 1
       </div>
       <div class="cel">
        div 1
       </div>
       <div class="cel">
        div 1
       </div>
       <div class="cel">
        div 1
       </div>
   </div>
</body>
</html>

I want the to have the same height overall.
Just test the script, and you will know my problem .
Please Help ME!

Reply via email to