CODEWITHSUNDEEP
javascriptjqueryhtml
user3462432
user3462432

Reputation: 3

how to select the particular HTML element which is part of a class and not all the elements of a class for JQuery selectors

    <script type="text/javascript">
         $(document).ready(function () {
         $(".style1:this").mouseover(function () {
         $(".style1:this").animate({ fontSize: '22px' }, "slow");
         });
         $(".style1:this").mouseout(function () {
         $(".style1:this").animate({ fontSize: '16px' }, "slow");
       });
    });
   </script>

Here ".style1" is the class....i want the animate function to work only on the element on which the mouseover() and mouseout() event occurs. The code given obviously doesnt work but i am trying to show what i want to do.

Upvotes: 0

Views: 50

Answers (2)

Jorge Enrique Reyes Salas
Jorge Enrique Reyes Salas

Reputation: 423

if what you want to animate is the font and you don't need to support old browsers you can always do this directly with CSS

.style1 {
  -webkit-transition: font-size .5s ease;
   -moz-transition: font-size .5s ease;
     -o-transition: font-size .5s ease;
        transition: font-size .5s ease;
  font-size: 20px;
}

.style1:hover {
-webkit-transition: font-size .5s ease;
   -moz-transition: font-size .5s ease;
     -o-transition: font-size .5s ease;
        transition: font-size .5s ease;
  font-size: 30px;
}

No need for JavaScript coding

Here is the example http://plnkr.co/edit/sDGMOczKgFYiqlMQDTvF?p=preview

Upvotes: 0

BoltClock
BoltClock

Reputation: 724522

this belongs within the callback, not outside it:

$(".style1").mouseover(function () {
  $(this).animate({ fontSize: '22px' }, "slow");
});
$(".style1").mouseout(function () {
  $(this).animate({ fontSize: '16px' }, "slow");
});

You can also chain ,mouseout() to .mouseover() to avoid having to repeat the selector at all:

$(".style1").mouseover(function () {
  $(this).animate({ fontSize: '22px' }, "slow");
}).mouseout(function () {
  $(this).animate({ fontSize: '16px' }, "slow");
});

Upvotes: 4

Related Questions