Question

我使用以下代码更改了页面上的内容，但正如您在http://ng1club.everythingcreative.co.uk上看到的那样，当一个类淡出而另一个类进入时，它会导致一个空白区域。有一种更好的方法可以将新课程称为旧课程，然后淡出下面的课程或不会导致相同问题的课程吗？

很抱歉，如果这是一个愚蠢的问题，但JQuery不是我的强项。

var Monday = "<div class=\"ng1_widget_event-text\">\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header\">\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header-top\">Mondays at NG1 Club<\/div>\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header-bottom\">Monday<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<p>#######<\/p><span>#######<\/span><span>#######<\/span><span>#######<\/span>\n\t\t\t\t\t\t\t<a class=\"ng1_widget_event-text-link\" href=\"#\">Book Online<\/a>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<img src=\"http:\/\/ng1club.everythingcreative.co.uk\/wp-content\/uploads\/2014\/02\/testwhatson1.jpg\" alt=\"Monday\">";
            var Tuesday = "<div class=\"ng1_widget_event-text\">\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header\">\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header-top\">Tuesdays at NG1 Club<\/div>\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header-bottom\">Tuesday<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<p>#######<\/p><span>#######<\/span><span>#######<\/span><span>#######<\/span>\n\t\t\t\t\t\t\t<a class=\"ng1_widget_event-text-link\" href=\"#\">Book Online<\/a>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<img src=\"http:\/\/ng1club.everythingcreative.co.uk\/wp-content\/uploads\/2014\/02\/testwhatson1.jpg\" alt=\"Tuesday\">";
            var Wednesday = "<div class=\"ng1_widget_event-text\">\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header\">\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header-top\">Wednesdays at NG1 Club<\/div>\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header-bottom\">#Midweek Madness<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<p>#######<\/p><span>#######<\/span><span>#######<\/span><span>#######<\/span>\n\t\t\t\t\t\t\t<a class=\"ng1_widget_event-text-link\" href=\"#\">Book Online<\/a>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<img src=\"http:\/\/ng1club.everythingcreative.co.uk\/wp-content\/uploads\/2014\/02\/testwhatson1.jpg\" alt=\"#Midweek Madness\">";
            var Thursday = "<div class=\"ng1_widget_event-text\">\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header\">\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header-top\">Thursdays at NG1 Club<\/div>\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header-bottom\">Thursday<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<p>#######<\/p><span>#######<\/span><span>#######<\/span><span>#######<\/span>\n\t\t\t\t\t\t\t<a class=\"ng1_widget_event-text-link\" href=\"#\">Book Online<\/a>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<img src=\"http:\/\/ng1club.everythingcreative.co.uk\/wp-content\/uploads\/2014\/02\/testwhatson1.jpg\" alt=\"Thursday\">";
            var Friday = "<div class=\"ng1_widget_event-text\">\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header\">\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header-top\">Fridays at NG1 Club<\/div>\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header-bottom\">Friday<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<p>#######<\/p><span>#######<\/span><span>#######<\/span><span>#######<\/span>\n\t\t\t\t\t\t\t<a class=\"ng1_widget_event-text-link\" href=\"#\">Book Online<\/a>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<img src=\"http:\/\/ng1club.everythingcreative.co.uk\/wp-content\/uploads\/2014\/02\/testwhatson1.jpg\" alt=\"Friday\"><\/img>";
            var Saturday = "<div class=\"ng1_widget_event-text\">\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header\">\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header-top\">Saturdays at NG1 Club<\/div>\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header-bottom\">Saturday<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<p>#######<\/p><span>#######<\/span><span>#######<\/span><span>#######<\/span>\n\t\t\t\t\t\t\t<a class=\"ng1_widget_event-text-link\" href=\"#\">Book Online<\/a>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<img src=\"http:\/\/ng1club.everythingcreative.co.uk\/wp-content\/uploads\/2014\/02\/testwhatson1.jpg\" alt=\"Saturday\">";
            var Sunday = "<div class=\"ng1_widget_event-text\">\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header\">\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header-top\">Sundays at NG1 Club<\/div>\n\t\t\t\t\t\t\t<div class=\"ng1_widget_event-text-header-bottom\">Sunday<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<p>#######<\/p><span>#######<\/span><span>#######<\/span><span>#######<\/span>\n\t\t\t\t\t\t\t<a class=\"ng1_widget_event-text-link\" href=\"#\">Book Online<\/a>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<img src=\"http:\/\/ng1club.everythingcreative.co.uk\/wp-content\/uploads\/2014\/02\/testwhatson1.jpg\" alt=\"Sunday\">";

            jQuery( document ).ready(function( $ ) {

                $('.ng1_widget_event_nights ul li a').click( function(e) {
                    event.preventDefault(); // prevent the default action
                    event.stopPropagation(); // stop the click from bubbling
                    $(this).closest('ul').find('.active').removeClass('active');
                });

                $( ".mon_click" ).click(function() {
                    $(this).addClass("active");
                    $(".ng1_widget_event").hide().html(Monday).fadeIn('slow');
                });
                $( ".tue_click" ).click(function() {
                    $(this).addClass("active");
                    $(".ng1_widget_event").hide().html(Tuesday).fadeIn('slow');
                });
                $( ".wed_click" ).click(function() {
                    $(this).addClass("active");
                    $(".ng1_widget_event").hide().html(Wednesday).fadeIn('slow');
                });
                $( ".thu_click" ).click(function() {
                    $(this).addClass("active");
                    $(".ng1_widget_event").hide().html(Thursday).fadeIn('slow');
                });
                $( ".fri_click" ).click(function() {
                    $(this).addClass("active");
                    $(".ng1_widget_event").hide().html(Friday).fadeIn('slow');
                });
                $( ".sat_click" ).click(function() {
                    $(this).addClass("active");
                    $(".ng1_widget_event").hide().html(Saturday).fadeIn('slow');
                });
                $( ".sun_click" ).click(function() {
                    $(this).addClass("active");
                    $(".ng1_widget_event").hide().html(Sunday).fadeIn('slow');
                });
            });

编辑：

<div class="ng1_widget_event"><ul>
<li class="Monday">
<span>Text</span>
<img src="http://ng1club.everythingcreative.co.uk/wp-content/uploads/2014/04/poptastic1.jpg" alt="Monday">
</li>
<li class="Tuesday">
<span>Text</span>
<img src="http://ng1club.everythingcreative.co.uk/wp-content/uploads/2014/04/poptastic1.jpg" alt="Tuesday">
</li>
</ul>
</div>

Answer 1

您可以在同一位置使用绝对定位的div，全部透明（不透明度：0;）但是可见的，具有不透明度1。在触发器上启动一个计时器，该计时器同时提高项目的不透明度以使其可见并降低项目的不透明度以淡出，直到不透明度为需要。

function switchDiv(fadeInDiv, fadeOutDiv) {
    if (fadeInDiv.style.opacity == 1) return;
    fadeInDiv.style.opacity = fadeInDiv.style.opacity+0.1;
    fadeOutDiv.style.opacity = fadeOutDiv.style.opacity-0.1;
    setTimeout(fade(fadeInDiv, fadeOutDiv), 500/*this indicates speed, the highest the slowest*/;
}

虽然无法测试，几乎是时候睡觉了！

使用.addclass调用var导致分割第二个空格

1 个答案: