Css3 Replacement for Jquery.Fadein and Fadeout

CSS3 replacement for jQuery.fadeIn and fadeOut

I have managed to fix this by doing something that feels unnatural and hacky:

function fadeIn (elem, fn) {
  var $elem = $(elem);

  $elem.addClass('is-animating');
  $elem.removeClass('is-hidden');

  // Smelly, setTimeout fix
  setTimeout(function () {
    $elem.removeClass('is-hiding');
  }, 0);

  $elem.on(transitionEndEvent, function () {

    $elem.removeClass('is-animating');

    if (typeof fn === 'function') {
      fn(); 
    }
  });
};

Adding the setTimeout function to the class that contains the transition-able property fixes the issue.

Working code here: Codepen fixed code

CSS Transition equivalent to jQuery fadeIn(), fadeOut(), fadeTo()

I've written loads about this (http://css3.bradshawenterprises.com) , but in short, you just add the transitions properties, then change the property.

So, instead of $('#header_text1').fadeOut(250);, you'd use in your CSS:

-webkit-transition: opacity 250ms ease-in-out;
-moz-transition: opacity 250ms ease-in-out;
-o-transition: opacity 250ms ease-in-out;
transition: opacity 250ms ease-in-out;

, then in your JS,

$('#header_text1').css({'opacity', 0});

If you want to run something when an animation has happened, there are events for transitionEnd that fire.

It's quite a different approach, but people have tried to bridge between JS and CSS in a few ways:

http://playground.benbarnett.net/jquery-animate-enhanced/ is a good link for this.

Can we use CSS in replacement of .fadeIn() in jQuery?

The reason is your are using your css assignment syntax wrong. The console would have alerted you to this. Make your changes as follows.

<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>
<body>
<p id="paragraph">This is a paragraph</p>
<button>Click me</button>
<script type="text/Javascript">

    $("button").click(function(){
        if ($("#paragraph").css("display") =="none"){
            $("#paragraph").css("display", "block");
            $("#paragraph").css("opacity", '1');
             
        }
        else{
            $("#paragraph").fadeOut();
        }
        
    });

</script>
</body>

creating jquery fadein and fadeout to replace html text

Your text is not fading in as you don't fade it out. ie it does: $("#div").fadeIn().fadeIn()

Change your last fadeIn to:

$(this).fadeOut(500, function() { 
    $(this).fadeIn(2000, function () {
        $(this).html('In the making, Soon to show all the work I can crate!');

You might like to consider a refactor to create a list of messages and then simply loop through them. This will also be re-usable and allow you to add more messages without lots of nasty callback-chaining, eg:

var msgs = ["msg1", "msg2"];var indx = 0;$("#div").text(msgs[indx]);setInterval(function() {  $("#div").fadeOut(    500,     function() {       indx++;      if (indx>=msgs.length) indx=0;      $(this).text(msgs[indx]);       $(this).fadeIn(500);    });}, 3000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id='div'>initial message</div>

jQuery fadein fadeout effects in css

The display:none; will remove the block abruptly, so you might want to animate the height as well.

Below is an example of the CSS transition:

$(function() {    $(".toggle-fade").click(function() {        $(".block").toggleClass('hidden');    });});

.block {    background:red;    height:300px;    width:300px;    visibility:visible;    opacity:1;    transition:2s;    -webkit-transition:2s;    transition-delay:1s;    -webkit-transition-delay:1s;}.block.hidden {    visibility:hidden;    height:0px;    opacity:0;    overflow:hidden;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><div class="block">    </div><button class="toggle-fade">Toggle block</button>

CSS: Replacing a Fade Out Image

Ofcourse it's possible, in jQuery animations second parameter is the function that runs after animation completes. More info

(function($) {
    $.fn.fadeDelay = function(delay) {
        var that = $(this);        delay = delay || 3000;
        return that.each(function() {
            $(that).queue(function() {
                setTimeout(function() {
                    $(that).dequeue();
                }, delay);            });
            $(that).fadeOut('slow',function(){              $('#test2').fadeIn('slow');            });        });    };
})(jQuery);
$('#test').fadeDelay(4000);

#test {    margin: 2em auto;    width: 10em;    height: 10em;    background: #069;    border-radius: 50%;}#test2 {    margin: 2em auto;    width: 10em;    height: 10em;    background: #f69;    border-radius: 50%;    display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><div id="test"></div><div id="test2"></div>

Javascript fade in fade out without Jquery and CSS3

getElementById givies you one element (or null), getElementsByClassName gives an array.

function handleClick(evt){
    var element = document.getElementById(evt.target.id);
    fade(element);

}

You seem to aim for usage of ID's, so this should answer your needs. I updated the whole thing: IDs

However, you should realize that this method of fading is much more costly than using GPU accelerated transitions.

Update

JSfiddle webkit opacity fade

jQuery alternative for fade in/fade out of div background

If you use jQuery UI you can accomplish this using animate

$('.box').mouseenter(function(){
  $(this).stop().animate({ backgroundColor: "red" }, 1000);
}).mouseleave(function(){
    $(this).stop().animate({ backgroundColor: "blue" }, 1000);
});

$('.box2').mouseenter(function(){
  $(this).stop().animate({ backgroundColor: "black" }, 1000);
}).mouseleave(function(){
    $(this).stop().animate({ backgroundColor: "blue" }, 1000);
});;

http://jsfiddle.net/NJe63/1/

EDIT:

just add .children('img').hide() .children('img')show() to the end

$('.box').mouseenter(function(){
  $(this).stop().animate({ backgroundColor: "red" }, 1000).children('img').show();
}).mouseleave(function(){
    $(this).stop().animate({ backgroundColor: "blue" }, 1000).children('img').hide();
});

$('.box2').mouseenter(function(){
  $(this).stop().animate({ backgroundColor: "black" }, 1000).children('img').show();
}).mouseleave(function(){
    $(this).stop().animate({ backgroundColor: "blue" }, 1000).children('img').hide();
});;

http://jsfiddle.net/NJe63/2/

You can use fadeIn,fadeOut for the image

$('.box').mouseenter(function() {
    $(this).children('img').stop(true,true).fadeIn(1000);
}).mouseleave(function() {
    $(this).children('img').stop(true,true).fadeOut(1000);
});

$('.box2').mouseenter(function() {
    $(this).children('img').stop(true,true).fadeIn(1000);

}).mouseleave(function() {
    $(this).children('img').stop(true,true).fadeOut(1000);
});

http://jsfiddle.net/NJe63/3/

You can use opacity to fade in and out the image.. but since the google logo is inside as a child element it will fadein/fadeout with it.

http://jsfiddle.net/NJe63/5/

Css3 Replacement for Jquery.Fadein and Fadeout