CODEWITHSUNDEEP
jquerycsshtml
Asim Siddiqui
Asim Siddiqui

Reputation: 309

Jquery CSS .animate li div

Please help me with the following code. I can use images for creating the circular menus and make it simple for me, but I want to use CSS and Jquery to make the page super fast and also learn something from this project. What I want to do is change(animate) the color of the circular shape that is around the hovered menu item. I think the code is very much self explaining, but if anything is not clear, let me know.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script src="jquery.color.min.js"></script>
<script type="text/javascript">
        $(document).ready(function () {
        var itemnumber = '';
        $('#menu li').hover(function () {
            itemnumber = '#item' + $(this).text();
            $(itemnumber).animate({color: "#abcdef"}, 1000);

        }).mouseleave(function () {
            $(itemnumber).animate({color: "#B1AC8F"}, 1000);
        });
        }); 
</script>
<style type="text/css">
    body {
        width: 810px;
        height: 800px;
        background-image: linear-gradient(bottom, rgb(255,255,255) 0%, rgb(206,203,183) 34%, rgb(177,172,143) 82%);
        background-image: -o-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(206,203,183) 34%, rgb(177,172,143) 82%);
        background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(206,203,183) 34%, rgb(177,172,143) 82%);
        background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(206,203,183) 34%, rgb(177,172,143) 82%);
        background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(206,203,183) 34%, rgb(177,172,143) 82%);
        background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(255,255,255)),color-stop(0.34, rgb(206,203,183)),color-stop(0.82, rgb(177,172,143)));
    }

    #menu ul { list-style:none; }
    #logo { width:250px; margin:0 285px; }
    .circle { width: 150px; height: 150px; background: transparent; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; border:10px; border-style:solid; color:#B8A36E; }
    .oval { margin: 0.5px 10px; width: 130px; height: 50px; background: #B8A36E; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; }
    #itempic {position:relative; margin: -1px -12px; z-index:-1;}
    #item1 {position:absolute; left: 160px; top:170px; }
    #item2 {position:absolute; left: 335px; top:170px; }
    #item3 {position:absolute; left: 510px; top:170px; }
    #item4 {position:absolute; left: 245px; top:325px; }
    #item5 {position:absolute; left: 420px; top:325px; }
    #item6 {position:absolute; left: 160px; top:480px; }
    #item7 {position:absolute; left: 335px; top:480px; }
    #item8 {position:absolute; left: 510px; top:480px; }
    #item9 {position:absolute; left: 245px; top:635px; }
    #item10 {position:absolute; left: 420px; top:635px; }
</style>
</head>

<body>
<img id="logo" src="logo.png">
<div id="menu">
<ul>
    <li><div class="circle" id="item1"><div class="oval"><img id="itempic" src="Item1.png"></div></div></li>
    <li><div class="circle" id="item2"><div class="oval"><img id="itempic" src="Item2.png"></div></div></li>
    <li><div class="circle" id="item3"><div class="oval"><img id="itempic" src="Item3.png"></div></div></li>
    <li><div class="circle" id="item4"><div class="oval"><img id="itempic" src="Item4.png"></div></div></li>
    <li><div class="circle" id="item5"><div class="oval"><img id="itempic" src="Item5.png"></div></div></li>
    <li><div class="circle" id="item6"><div class="oval"><img id="itempic" src="Item1.png"></div></div></li>
    <li><div class="circle" id="item7"><div class="oval"><img id="itempic" src="Item2.png"></div></div></li>
    <li><div class="circle" id="item8"><div class="oval"><img id="itempic" src="Item3.png"></div></div></li>
    <li><div class="circle" id="item9"><div class="oval"><img id="itempic" src="Item4.png"></div></div></li>
    <li><div class="circle" id="item10"><div class="oval"><img id="itempic" src="Item5.png"></div></div></li>
</ul>
</div>
</body>
</html>

I have found out the issue.. thanks for help guys!

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.color.min.js"></script>
<script type="text/javascript">
        $(document).ready(function () {
        var itemnumber = '';
        var itemoval = '';
        $('#menu li').hover(function () {
            itemnumber = '#item' + ($('#menu li').index(this) + 1);
            itemoval = itemnumber + '-oval';
            $(itemnumber).animate({color: "#F97780"}, 500);
            $(itemoval).animate({backgroundColor: "#F97780"}, 500);
        }).mouseleave(function () {
            $(itemnumber).animate({color: "#B8A36E"}, 500);
            $(itemoval).animate({backgroundColor: "#B8A36E"}, 500);
        });
        }); 
</script>
<style type="text/css">
    body {
        width: 810px;
        height: 800px;
        background-image: linear-gradient(bottom, rgb(255,255,255) 0%, rgb(206,203,183) 34%, rgb(177,172,143) 82%);
        background-image: -o-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(206,203,183) 34%, rgb(177,172,143) 82%);
        background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(206,203,183) 34%, rgb(177,172,143) 82%);
        background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(206,203,183) 34%, rgb(177,172,143) 82%);
        background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(206,203,183) 34%, rgb(177,172,143) 82%);
        background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(255,255,255)),color-stop(0.34, rgb(206,203,183)),color-stop(0.82, rgb(177,172,143)));
    }

    #menu ul { list-style:none; }
    #logo { width:250px; margin:0 285px; }
    .circle { width: 150px; height: 150px; background: transparent; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; border:10px; border-style:solid; color:#B8A36E; }
    .oval { z-index:-1; margin: 0.5px 10px; width: 130px; height: 50px; background: #B8A36E; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; }
    #itempic {position:relative; margin: -1px -12px; z-index:-1;}
    #item1 {position:absolute; left: 160px; top:170px; }
    #item2 {position:absolute; left: 335px; top:170px; }
    #item3 {position:absolute; left: 510px; top:170px; }
    #item4 {position:absolute; left: 245px; top:325px; }
    #item5 {position:absolute; left: 420px; top:325px; }
    #item6 {position:absolute; left: 160px; top:480px; }
    #item7 {position:absolute; left: 335px; top:480px; }
    #item8 {position:absolute; left: 510px; top:480px; }
    #item9 {position:absolute; left: 245px; top:635px; }
    #item10 {position:absolute; left: 420px; top:635px; }
</style>
</head>

<body>
<img id="logo" src="logo.png">
<div id="menu">
<ul>
    <li><div class="circle" id="item1"><div class="oval" id="item1-oval"><img id="itempic" src="Item1.png"></div></div></li>
    <li><div class="circle" id="item2"><div class="oval" id="item2-oval"><img id="itempic" src="Item2.png"></div></div></li>
    <li><div class="circle" id="item3"><div class="oval" id="item3-oval"><img id="itempic" src="Item3.png"></div></div></li>
    <li><div class="circle" id="item4"><div class="oval" id="item4-oval"><img id="itempic" src="Item4.png"></div></div></li>
    <li><div class="circle" id="item5"><div class="oval" id="item5-oval"><img id="itempic" src="Item5.png"></div></div></li>
    <li><div class="circle" id="item6"><div class="oval" id="item6-oval"><img id="itempic" src="Item1.png"></div></div></li>
    <li><div class="circle" id="item7"><div class="oval" id="item7-oval"><img id="itempic" src="Item2.png"></div></div></li>
    <li><div class="circle" id="item8"><div class="oval" id="item8-oval"><img id="itempic" src="Item3.png"></div></div></li>
    <li><div class="circle" id="item9"><div class="oval" id="item9-oval"><img id="itempic" src="Item4.png"></div></div></li>
    <li><div class="circle" id="item10"><div class="oval" id="item10-oval"><img id="itempic" src="Item5.png"></div></div></li>
</ul>
</div>
</body>
</html>

Upvotes: 0

Views: 489

Answers (2)

ZapRowsdower910
ZapRowsdower910

Reputation: 3214

Give this a look: http://jsfiddle.net/ufomammut66/ZsX8e/

I changed your hover event to a mouseenter event. If you change it back to hover in the jsfiddle you'll notice the 'in' logging statement will fire twice (look for the console.log statements I left in) on the way out, which we don't want.

I also changed the jquery selector to your circle class. I did this because it seems like since you can't see the li element (tho that could just be the lack of images) you'd want it to fire on entering the circle element.

It wasn't clear to me what you're trying to use itemnumber for, but it seemed like you're trying to reconstruct the circle elements ID to select it. We don't need to do this because the this element will refer to the current element we're entering or leaving.

Note: I assume you're using this: http://www.bitstorm.org/jquery/color-animation/ as your jquery.color.min.jsimport. The jsFiddle has this imported to work.

Hope this helps.

Upvotes: 1

Undefined
Undefined

Reputation: 11431

You need to take a look at jQuery UI Color animation here.

You can include jQuery UI using google CDN by including this script tag.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery-ui/1.8.21/jquery-ui.min.js"></script>

Basically it boils down to linking jQuery UI, then changing your hover function to a mouseenter function.

Check out this working example.

Upvotes: 2

Related Questions