Question 36377 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Struggling to get .fadeIn jQuery to work on a homepage image transition script

I’m unsure if fadeIn is even the right transition (newbie), but I’m basically trying to have a crossfade between homepage images that change every 3 seconds. The changing is working successfully, but I don’t know how to get them to fade. Currently there is just an abrupt switch. Here is my code:

    var images = ["image-link1", "image-link2"];
$(function () {
    var i = 0;
    document.getElementById("homeImage").src = images[i];
    setInterval(function () {
        if (i == images.length) {
            i = 0;
        }
        else { 
            document.getElementById("homeImage").src = images[i];
            $(this).fadeIn("slow");
            i++;
        }
    }, 3000);
});

I’m using ASP.NET MVC. Thanks!

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Williams Marketing Studio</title>
    <link rel="stylesheet" href="~/Content/newstyle.css">
    @RenderSection("metatags", required: false)
    @Scripts.Render("~/bundles/modernizr")
</head>

<body>
    <header>
        <nav>
            <div class="nav-bar">
                <span><a href="/Home/Index"><img src="~/Content/Images/nav-image.png" class="img-nav" title="Williams Marketing Studio" aria-label="Company Logo" /></a></span>
                <ul class="nav-links">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("Services", "Index", "Services")</li>
                    <li>@Html.ActionLink("Categories", "Index", "Categories")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
                @using (Html.BeginForm("Index", "Services", FormMethod.Get, new { @class = "navbar-form navbar-left" }))
                {
                    <div class="flex-row">
                        @Html.TextBox("Search", null, new { @class = "form-input", @placeHolder = "Search Services" })
                        <button type="submit" class="button">Search</button>
                    </div>
                }
            </div>
        </nav>
    </header>
    <section>
        <div>
            <p><img id="homeImage" src="~/Content/Images/home-image2.jpg" class="header-image" padding="0px" title="Homepage Image" aria-label="Colourful Laptop Screen"></p>
        </div>
        <div class="container body-content">
            @RenderBody()
            <hr />
    </section>
    <footer>
        <div class="footer">
            <section class="footer-column">
                Copyright &copy;@DateTime.Now.Year<br>
                <a href="mailto:[email protected]" title="Email Us">Williams Marketing Studio</a>
                <a href="https://validator.w3.org/docs/users.html#Calling" title="HTML Validator" style="color: #87edaa;">W3C Validator API</a>
                <a href="https://jigsaw.w3.org/css-validator/manual.html" title="CSS Validator" style="color: #87edaa;">CSS Validator</a>
            </section>
            <section class="footer-column">
                <span><a href="/Home/Index" title="HOME" aria-label="HOME"><img src="~/Content/Images/nav-image.png" alt="footer logo" height="100px"></a></span>
            </section>
            <section class="footer-column">
                <ul class="footer-links">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("Services", "Index", "Services")</li>
                    <li>@Html.ActionLink("Categories", "Index", "Categories")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
            </section>
        </div>
    </footer>
    <!--<footer>
        <address>
            Written by <a href="mailto:[email protected]">Williams Marketing Studio</a><br>
        </address>
        <p>&copy; @DateTime.Now.Year </p>
    </footer>-->
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
        </html>

  2. 0

    You have to fade out before that, you can add fadeOut before changing the elememt’s background and then add fadeIn when the background has changed

    Login or Signup to reply.
  3. 0

    The steps will be

    1. Show an image.
    2. Fade out the current image.
    3. After finished fading out, change the url to a new image.
    4. Fade in to show the new image.

    Working solution:

     $(function () {
    var i = 0;
    document.getElementById("homeImage").src = images[i];
    setInterval(function () {
        if (i == images.length - 1) {
            i = 0;
        }
        else { 
            $('#homeImage').fadeOut("slow", function() {
                document.getElementById("homeImage").src = images[i];
                $('#homeImage').fadeIn("slow");
            });
            i++;
        }
    }, 3000);
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search