1 Replies - 3449 Views - Last Post: 19 March 2012 - 04:09 AM

#1 rboyart  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 12-March 11

calling a list with jquery quicksand plugin

Posted 16 March 2012 - 06:38 AM

hi there,

i'm using the quicksand library, i'm doing my portfolio, and i want it to animate the elements from my portfolio list with jquery, but i can't get them, i don't know how to call them....

my list in index.html

    <section id="container">
                <ul id="stage" class="menu">
                    <li data-tags="Sound Design"> <a href="assets/img/shots/1.png"> <img src="assets/img/shots/1.png" alt="Illustration"/> </a></li>
                    <li data-tags="Music,Sound Design"> <a href="assets/img/shots/2.png"> <img src="assets/img/shots/2.png" alt="Illustration" /></a></li>
                    <li data-tags="Web Design,Music"><a href="assets/img/shots/3.png"><img src="assets/img/shots/3.png" alt="Illustration" /></li>
                    <li data-tags="Web Design,Sound Design"><a href="assets/img/shots/4.png"><img src="assets/img/shots/4.png" alt="Illustration" /></li>
                </ul>
            </section>
     



and i'm trying to call the images, that are my mouse_Btn, in this way from my file "script.js"

    $('#stage li').hover(function(){

         $(this).stop().animate({opacity:1},'slow');
         console.log("yeah");

    }, function(){
        $(this).stop().animate({opacity:0},'slow');
        console.log("chau");


    })



but it doesn't work, i also try this,


    var $list         = $('#stage');
    $(function() {
                  

                    $list.find('li').hover(
                        function () {
                            $('a',$(this)).stop().animate({opacity:0},'slow');
                            console.log("yeah");
                        },
                        function () {
                            $('a',$(this)).stop().animate({opacity:1},'slow');
                            console.log("chau");
                        }
                    );
                });



but i can't get to control the elements from my list separetly, i'm sure is a easy thing for you guys, but i'm new in java, and don't know how to go on....

i send too the website in a .zip, if that help to understand the problem.

Thanks for all your help,

Rodrigo

Attached File(s)

  • Attached File  V3.zip (83.6K)
    Number of downloads: 42


Is This A Good Question/Topic? 0
  • +

Replies To: calling a list with jquery quicksand plugin

#2 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 789
  • View blog
  • Posts: 1,676
  • Joined: 30-January 09

Re: calling a list with jquery quicksand plugin

Posted 19 March 2012 - 04:09 AM

Well, in you HTML two of your <a> anchor tags aren't closed, and you haven't put a semi-colon on the end of your javascript. I've gotten this code to work, which is templated off your code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<section id="container">
	<ul id="stage" class="menu">
		<li data-tags="Sound Design"> <a href="assets/img/shots/1.png"> <img src="assets/img/shots/1.png" alt="Illustration"/> a</a></li>
		<li data-tags="Music,Sound Design"> <a href="assets/img/shots/2.png"> <img src="assets/img/shots/2.png" alt="Illustration" /> b</a></li>
		<li data-tags="Web Design,Music"><a href="assets/img/shots/3.png"><img src="assets/img/shots/3.png" alt="Illustration" /> c</a></li>
		<li data-tags="Web Design,Sound Design"><a href="assets/img/shots/4.png"><img src="assets/img/shots/4.png" alt="Illustration" /> d</a></li>
	</ul>
</section>
<script>
$('#stage li').hover(function(){
     $(this).stop().animate({opacity:1},'slow');
     console.log("yeah");
}, function(){
    $(this).stop().animate({opacity:0},'slow');
    console.log("chau");
});
</script>


Was This Post Helpful? 0
  • +
  • -

Page 1 of 1