Jquery停止图像在淡出之前闪烁

时间:2018-05-04 16:48:48

标签: javascript jquery

我在下面给出了jquery函数来在lightbox图像carousal中显示图像。它工作正常,除了当用户点击下一个导航按钮以查看下一个图像时,当前图像闪烁一次然后显示下一个图像。我希望在淡出之前移除此图像闪烁并希望实现平滑的淡出效果。怎么做?

function view_post(id, nav) {
    var viewer = $("#post-viewer");
    var userid = '';
    var page = '';
    if (nav != undefined && nav) {
        var lists = $(".post-list");
        userid = lists.data('userid');
        page = lists.data('page');
    }
    showLoader();
    $.ajax({
        url : baseUrl + 'post/load?id=' + id,
        data : {userid:userid,page:page},
        success: function(t) {
            viewer.find('.content').html(t);
            viewer.fadeIn();
            viewer.find('.close').click(function() {
                viewer.fadeOut();
                viewer.find('.content').html('');
                return false;
            })
            viewer.find('.cover').click(function() {
                viewer.fadeOut();
                viewer.find('.content').html('');
    var url = baseUrl;
    var title = 'Title';
if (typeof (history.pushState) != "undefined") {
        var obj = { Title: title, Url: url };
        history.pushState(obj, obj.Title, obj.Url);
    } else {
        alert("Browser does not support HTML5.");
    }
                return false;
            })
            hideLoader();
            reload_init();
        }
    });
    return false;
}

1 个答案:

答案 0 :(得分:0)

查看您的代码,您正在尝试<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>org.jvnet.jaxb2.maven2</groupId> <artifactId>divide</artifactId> <version>0.0.1-SNAPSHOT</version> <dependencies> <dependency> <groupId>org.glassfish.jaxb</groupId> <artifactId>jaxb-runtime</artifactId> <version>2.2.11</version> </dependency> <!-- JUnit --> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <scope>test</scope> <version>4.12</version> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.codehaus.mojo</groupId> <artifactId>xml-maven-plugin</artifactId> <version>1.0.2</version> <executions> <execution> <goals> <goal>transform</goal> </goals> <phase>process-sources</phase> </execution> </executions> <configuration> <transformationSets> <transformationSet> <dir>${project.build.directory}/xjc-c/META-INF</dir> <outputDir>${project.build.directory}/xjc-c/META-INF</outputDir> <includes> <include>sun-jaxb.episode</include> </includes> <stylesheet>src/main/xslt/removeJaxbSchemaBindings.xslt</stylesheet> </transformationSet> </transformationSets> </configuration> </plugin> <plugin> <groupId>org.jvnet.jaxb2.maven2</groupId> <artifactId>maven-jaxb2-plugin</artifactId> <version>0.13.3</version> <executions> <execution> <id>xjc-c</id> <goals> <goal>generate</goal> </goals> <phase>generate-sources</phase> <configuration> <generatePackage>test.c</generatePackage> <generateDirectory>${project.build.directory}/xjc-c</generateDirectory> <schemaIncludes> <includes>c.xsd</includes> </schemaIncludes> </configuration> </execution> <execution> <id>xjc-a</id> <goals> <goal>generate</goal> </goals> <phase>generate-resources</phase> <configuration> <generatePackage>test.a</generatePackage> <generateDirectory>${project.build.directory}/xjc-a</generateDirectory> <schemaIncludes> <includes>a.xsd</includes> </schemaIncludes> <bindings> <binding> <fileset> <directory>${project.build.directory}/xjc-c/META-INF</directory> <includes> <include>sun-jaxb.episode</include> </includes> </fileset> </binding> </bindings> </configuration> </execution> <execution> <id>xjc-b</id> <goals> <goal>generate</goal> </goals> <phase>generate-resources</phase> <configuration> <generatePackage>test.b</generatePackage> <generateDirectory>${project.build.directory}/xjc-b</generateDirectory> <schemaIncludes> <includes>b.xsd</includes> </schemaIncludes> <bindings> <binding> <fileset> <directory>${project.build.directory}/xjc-c/META-INF</directory> <includes> <include>sun-jaxb.episode</include> </includes> </fileset> </binding> </bindings> </configuration> </execution> </executions> </plugin> </plugins> </build> </project> 看似已经可见的图像,这意味着不透明度将从0-> 100变为淡入,从而导致闪烁。

如果您在fadeIn例程中更改了以下行,则应该全部设置..

navigate_post

即。 navigate_post(l, type) { ... container.find('.image').hide(); container.find('.image-' + imageToLoad).show(); return false; } - &GT; .fadeIn()