search

google-code-export / wiquery

Automatically exported from code.google.com/p/wiquery
MIT License
1 stars 1 forks source link

Chained animation does not work #204

Closed GoogleCodeExporter closed 9 years ago

GoogleCodeExporter commented 9 years ago 
A slideDown with a chained animation does not work.  I tested and made sure 
regular jQuery (1.5.2 jquery and 1.8.12 jquery-ui) without WiQuery works with 
the following:

$("#myDiv").slideDown({ queue: false, duration: 1000 }).animate( 
{backgroundColor: "#CCCCCC" },'slow');

You can test by a simple page with a single Accordian as the only component.  
One of the WiQuery javascript resources prevents the animation from working.

What is the expected output? What do you see instead?
I see the slide down occur with no background color animation.

What version of the product are you using? On what operating system?
I tried 1.2.3 and 1.2.4 .  Both do not work when chaining the animation as 
stated above.

Please provide any additional information below.
Below is the simple Html without WiQuery that works with:
$("#myDiv").slideDown({ queue: false, duration: 1000 }).animate( 
{backgroundColor: "#CCCCCC" },'slow');

<html
    xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd">

<head>
<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></sc
ript>
</head>
<body>
    <div id="myDiv" style="display:none;height:50px;background-color:#EB8F00">Slide down and animate background color</div> 
</body>
</html>

Now change the html and simply add an accordian component:
<html
    xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd">

<body>
    <div wicket:id="accordian">
    </div>
    <div id="myDiv" style="display:none;height:50px;background-color:#EB8F00">Slide down and animate background color</div> 
</body>
</html>

Here is the Java for testing:

public class ExperimentalPage extends WebPage
{
    private Accordion accordion;

    public ExperimentalPage()
    {
        initComponents();
    }

    private void initComponents()
    {
        accordion = new Accordion("accordian");
        add(accordion.setVisible(true));

    }
}

When the accordian is visible , the animation of the background color will not 
work but the slide does (you can issue this command in Firebug or put directly 
in the html):

$("#myDiv").slideDown({ queue: false, duration: 1000 }).animate( 
{backgroundColor: "#CCCCCC" },'slow');

Original issue reported on code.google.com by christop...@gmail.com on 17 Aug 2011 at 2:23

GoogleCodeExporter commented 9 years ago

Original comment by hielke.hoeve on 29 Mar 2012 at 7:14

GoogleCodeExporter commented 9 years ago 
hi! try this instead:

<html 
xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd">
<body>
    <div wicket:id="accordion"></div>
    <div id="myDiv" style="display: none; height: 50px; background-color: #EB8F00">Slide down and animate background color</div>
</body>
<footer>
<script>
$(document).ready(function(){
    $("#myDiv").slideDown({ queue: false, duration: 1000 }).animate( {backgroundColor: "#CCCCCC" },'slow');
});
</script>
</footer>
</html>

and add an accordion in Wicket. The problem you are having is because the 
jquery resources are added by WiQuery but this is rendered after your script 
tag. Your browser does not recognize $ because this is declared in the jquery 
script. By putting your code in either the body or the footer you are ensured 
that all resources have been loaded.

Original comment by hielke.hoeve on 29 Mar 2012 at 7:31