CODEWITHSUNDEEP
jquerycss
user2252219
user2252219

Reputation: 865

How to stop blinking when text is hovered?

When you hover the link, it just starts blinking. How can I get it to not blink ? I've tried adding a stop propagation.

I want the text to change but I don't want that blinking effect to happen. I just want it to change at once.

Fiddle Demo

$('#hello').attr('data-originalText', function() {
  return (this.textContent || this.innerText).trim();
}).hover(function() {
    $(this).stop().fadeOut(500, function() {
      $(this).html('<a style="text-decoration:none; color:#222;" href="mailto:sfssfl.com">[email protected]</a>').stop().fadeIn();
    });
  },

  function() {
    $(this).stop().fadeOut(800, function() {
      $(this).text($(this).attr('data-originalText')).stop().fadeIn();
    });
  });
.footer_5 {
  position: relative;
  display: flex;
  align-items: top;
  justify-content: center;
  top: 420px;
}
#hello {
  font-family: 'KeplerStd-MediumDisp';
  font-size: 42px;
  letter-spacing: 1px;
  color: #222222;
  border-bottom: 3px solid #222222;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="footer_5">
  <p id="hello"><span class="first">Please say hello.</span>
  </p>
</div>

Upvotes: 1

Views: 2318

Answers (5)

Amar Singh
Amar Singh

Reputation: 5622

HERE IS MY SOLUTION (i have given red color to text ):

DEMO

$('#hello').attr('data-originalText', function () {
    return (this.textContent || this.innerText).trim();
}).hover(function () {

        $(this).html('<a href="mailto:sfssfl.com"><font color="red">[email protected]</font></a>').stop().fadeIn();
        $(this).css("border-bottom", "none");

},

function () {
    $(this).stop().fadeOut(800, function () {
        $(this).text($(this).attr('data-originalText')).stop().fadeIn();
    });
});

Upvotes: 0

Vivek Tankaria
Vivek Tankaria

Reputation: 1311

Simply remove the fadeOut and FadeIn and it will work have a look below :

here is the updated fiddle

$('#hello').attr('data-originalText', function () {
    return (this.textContent || this.innerText).trim();
}).hover(function () {
    $(this).html('<a style="text-decoration:none; color:#222;" href="mailto:sfssfl.com">[email protected]</a>');

},

function () {

        $(this).text($(this).attr('data-originalText'));

});

Upvotes: 0

ketan
ketan

Reputation: 19341

Remove $(this).stop().fadeOut(500, function () { from JQuery will give you desire output.

$('#hello').attr('data-originalText', function () {
    return (this.textContent || this.innerText).trim();
}).hover(function () {
        $(this).html('<a style="text-decoration:none; color:#222;" href="mailto:sfssfl.com">[email protected]</a>').stop().fadeIn();
},

function () {
    $(this).stop().fadeOut(800, function () {
        $(this).text($(this).attr('data-originalText')).stop().fadeIn();
    });
});

Working Fiddle

Upvotes: 0

Harry
Harry

Reputation: 89750

The problem happens because the jQuery fadeOut function sets display of the element to none along with changing opacity to 0. Once the element's display becomes none, we are no longer hovering on the element even though the mouse is in the same position and so the hover out event kind of sets in, once this sets in and the fade-in is being done, the hover event again kicks in and it kind of goes into a cyclic loop.

One way to avoid the fadeOut affecting the display setting would be to manually set the display to block once the fade out is completed.

$('#hello').attr('data-originalText', function() {
  return (this.textContent || this.innerText).trim();
}).hover(function() {
    $(this).stop().fadeOut(500, function() {
      $(this).css('display', 'block'); // added this line
      $(this).html('<a style="text-decoration:none; color:#222;" href="mailto:sfssfl.com">[email protected]</a>').stop().fadeIn();
    });
  },

  function() {
    $(this).stop().fadeOut(800, function() {
      $(this).text($(this).attr('data-originalText')).stop().fadeIn();
    });
  });
.footer_5 {
  position: relative;
  display: flex;
  align-items: top;
  justify-content: center;
  top: 420px;
}
#hello {
  font-family: 'KeplerStd-MediumDisp';
  font-size: 42px;
  letter-spacing: 1px;
  color: #222222;
  border-bottom: 3px solid #222222;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="footer_5">
  <p id="hello"><span class="first">Please say hello.</span>
  </p>
</div>

Another way to overcome this problem would be to use animate() function to change the opacity of element alone on hover in/out instead of the fadeIn, fadeOut functions. This way the display setting of the element is never affected and so it doesn't go into a loop.

$('#hello').attr('data-originalText', function() {
  return (this.textContent || this.innerText).trim();
}).hover(function() {
    $(this).stop().animate({
      opacity: 0
    }, 500, function() {
      $(this).html('<a style="text-decoration:none; color:#222;" href="mailto:sfssfl.com">[email protected]</a>').stop().animate({
        opacity: 1
      });
    });
  },

  function() {
    $(this).stop().animate({
      opacity: 0
    }, 800, function() {
      $(this).text($(this).attr('data-originalText')).stop().animate({
        opacity: 1
      });
    });
  });
.footer_5 {
  position: relative;
  display: flex;
  align-items: top;
  justify-content: center;
  top: 420px;
}
#hello {
  font-family: 'KeplerStd-MediumDisp';
  font-size: 42px;
  letter-spacing: 1px;
  color: #222222;
  border-bottom: 3px solid #222222;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="footer_5">
  <p id="hello"><span class="first">Please say hello.</span>
  </p>
</div>

Or alternately, it seems like we an even use the fadeTo function (which takes the end opacity as a argument). This also does not seem to affect the display property of the element.

$('#hello').attr('data-originalText', function() {
  return (this.textContent || this.innerText).trim();
}).hover(function() {
    $(this).stop().fadeTo(500, 0, function() {
      $(this).css('display', 'block'); // added this line
      $(this).html('<a style="text-decoration:none; color:#222;" href="mailto:sfssfl.com">[email protected]</a>').stop().fadeTo(500, 1);
    });
  },

  function() {
    $(this).stop().fadeTo(800, 0, function() {
      $(this).text($(this).attr('data-originalText')).stop().fadeTo(800, 1);
    });
  });
.footer_5 {
  position: relative;
  display: flex;
  align-items: top;
  justify-content: center;
  top: 420px;
}
#hello {
  font-family: 'KeplerStd-MediumDisp';
  font-size: 42px;
  letter-spacing: 1px;
  color: #222222;
  border-bottom: 3px solid #222222;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="footer_5">
  <p id="hello"><span class="first">Please say hello.</span>
  </p>
</div>

Reference for the approach used in the 3rd snippet was this SO thread. The other two were identified by self through jQuery docs.

Upvotes: 2

Chintan Mirani
Chintan Mirani

Reputation: 1465

Simply try this without any effect. Just show and hide.

$('#hello').attr('data-originalText', function () {
    return (this.textContent || this.innerText).trim(); })
.hover(
    function () {
        $(this).hide();
        $(this).html('<a style="text-decoration:none; color:#222;" href="mailto:sfssfl.com">[email protected]</a>').show(); 
    },

    function () {
        $(this).hide();
        $(this).text($(this).attr('data-originalText')).show()
    }
);

Upvotes: 0

Related Questions