CODEWITHSUNDEEP
jquery
MannyD
MannyD

Reputation: 23

Jquery selection of tags

First time question.

I have a div class named "leftbox".

Inside "leftbox" I have a paragraph and a span tag nested in it.

When I mouse enter an image (class named "push"), I want the paragraph tags inside leftbox to fade out, but leave the span tags visible.

Here is the HTML for "leftbox".

<html>
<body>
<img class="push" src="images/seed1.jpg"></a>
<div class="leftbox">
<p>lorem ispum dolor sit ameti conse <span>this seed is your</span> etur ad ipisicing   elit sed loeiusim</p>
</div>
</body>
</html>

Here is my attempt to perform this event

<script>
$(document).ready(function(){
$(".push").mouseenter(function(){
$("p").fadeOut(1000);
});
});
</script

Thank you for your help and sharing!

Upvotes: 2

Views: 56

Answers (2)

Landlocked Surfer
Landlocked Surfer

Reputation: 433

If you put the text you want to hide inside some span tags and then "animate" those elements into transparency then you should observe the desired effect.

<p>
  <span class="fadeable">lorem ispum dolor sit ameti conse</span>
  <span>this seed is your</span>
  <span class="fadeable">etur ad ipisicing  elit sed loeiusim<span>
</p>


$(document).ready(function () {
    $(".push").mouseenter(function () {
        $("p .fadeable").animate({
            opacity: 0
        }, 1000);
    });
});

Have a look at this: http://jsfiddle.net/aQtDb/

Upvotes: 0

matewka
matewka

Reputation: 10168

This one is much much easier and doesn't need jQuery at all (neither any javascript). But it will work only if the <div class="leftbox"> is immediate sibling of the image.
And I assumed that you want the <span> to fadeIn back again when the image is unhovered.

.push + .leftbox p span {
    -webkit-transition: opacity ease-out 1s;
    -moz-transition: opacity ease-out 1s;
    -ms-transition: opacity ease-out 1s;
    -o-transition: opacity ease-out 1s;
    transition: opacity ease-out 1s;
}
.push:hover + .leftbox p span {
    opacity: 0
}

Here's and example: JsFiddle

The great advantage of this solution is the native CSS animation engine. E.g. when you unhover the image before the span becomes completely invisible, it will start fading-in from the same point it stopped fading-out. In jQuery solution it would complete the animation to opactiy: 0 and then start fading-in back. Imagine the situation when you hover and unhover the image repeatedly 50 times in few seconds. The animation would consequently repeat itself for 50 seconds!

Upvotes: 1

Related Questions