Loading Ajax data into a specific div

Created 3 files:

  1. fn.php
  2. script.js
  3. index.php

In fn.php I inserted the following code:

<?php if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest'){
    if (isset($_REQUEST['catname'])){
        $catname = $_REQUEST['catname'];
        echo select_cat($catname);
    }
}
function select_cat($select_cat){
    echo $select_cat;
}
?>

In script.js

function get_category(catname){
    var catname = catname;
    $("#result").html('<img src="loader.gif" />');
    $("#result").load("fn.php", { catname: catname });
}

In index.php

<div class="r" onclick="get_category('catname');">Click Me</div>
<div id="result"></div>

This whole code works… jQuery is connected… The question is: how to add the effect that 1 div, let’s say, smoothly appears, or leaves… in general, how to add an effect to the code and is it really possible to do this.

p>


Answer 1, authority 100%

Choose any of effects and animations

UPD:

var sidebar_next = $("#sidebar_next");
    if(sidebar_next.hasClass('afterAnimation')){
        sidebar_next.animate({ marginLeft: "0px" }, 500).removeClass('afterAnimation');
    }
    else {
        sidebar_next.animate({ marginLeft: "175px" }, 500).addClass('afterAnimation');
    }

Answer 2

$("#button").toggle(
function(){ $("#mydiv").show();},
function(){ $("#mydiv").hide();}
);

This is how when clicking on the button with id=”mydiv” mydiv will appear and disappear