jQuery fade in/out while applying CSS

user_18066627 0
Viewed 18

I'm trying to apply css styles on fade in/out. My bad that JS is not my forte. Any idea how to put those two functions together?

    $(".share").mouseenter(function(){
        $(".social-overlay-outer").fadeIn({.css("display", "block")});
    });
    $(".share").mouseleave(function(){
        $(".social-overlay-outer").fadeOut({.css("display", "none")});
    });
css jquery
1 Answers

To answer your question; adding css styles in jQuery is done by adding the function to the end of the previous one (see example below).

NOTE: fadeOut functionality transitions css opacity and adds display:none to the element when the animation completes and is not necessary as in your example.

$(".share").mouseenter(function() {
  $(".social-overlay-outer").fadeIn().css("color", "red");
});
$(".share").mouseleave(function() {
  $(".social-overlay-outer").fadeOut();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="share">SHARE</div>
<div class="social-overlay-outer">Social</div>

If you want to add css styles to the element once the fadeIn animation completes you can instead use the callback parameter of the function.

.fadeIn( [duration ] [, complete ] )

$(function() {
  $(".btn1").click(function() {
    $("p").fadeOut("slow", function() {
      $(this).css("font-size","10px");
    });
  });
  $(".btn2").click(function() {
    $("p").fadeIn("5s", function() {
      $(this).css("font-size","20px");
    });
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>This is a paragraph.</p>

<button class="btn1">Fade out</button>
<button class="btn2">Fade in</button>

user_21202610
Related