Multiple Partial With Fade In Fade Out Effect in MVC 5

This blog, will help you to understand how multiple Fade in and Fade out effect will be shown in partial in MVC.

First you need to understand how to display multiple partial view in single event follow my below assignment.

• Stepwise Display Multiple Partial View Using JSON in MVC 5

Now while displaying the partial view you need to do below change while displaying partial view:



Hence My View has been changed as below way:

@model MutiplePartialViewFadeInFadeOutEffect.Models.MyMultipleUpdateViewModel

@{
    ViewBag.Title = "Display Mutiple Partial View Demo";
}

<h2>Index</h2>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.10.2.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"></script>


<script>
    function GetData(url, onSuccess) {
        $.ajax({
            type: "GET",
            cache: false,
            url: url,
            dataType: "json",
            success: function (data, textStatus, jqxhr) {
                onSuccess(data.Json, data.Html);
            },
            error: function (data, text, error) {
                alert("Error: " + error);
            }
        });
        return false;
    }
    function fadeInEffect(json, html) {
        $("#PartialViewDiv1").html(html[0]).hide().fadeIn(4000);
        $("#PartialViewDiv2").html(html[1]).hide().fadeIn(4000);
    }
    function fadeOutEffect() {
        $("#PartialViewDiv1").fadeOut('slow');
        $("#PartialViewDiv2").fadeOut('slow');
    }

</script>

<input type="button" onclick="GetData('/DisplayMutiplePartialView/CreatePartialView', fadeInEffect);" value="Multiple Partial View With Fade In effect" />
<input type="button" onclick="fadeOutEffect()" value="Multiple Partial View With Fade Out effect" />
<br>
   <br>
        <div id="PartialViewDiv1"></div>
   </br>
</br>
 <div id="PartialViewDiv2"></div>

Hence using above code you will get FadIn and FadOut effect for multiple partial view in MVC using jQuery.

Run the application you will and click on buttons you will start displaying FadIn and FadOut effect in MVC.