jQuery - 交叉渐变效果

Question

我在javascript中有这个代码：

var condoNameList: [String] = [] {
        didSet {
            self.condoNameListTemp = condoNameList
            condoName.inputView = condoPicker
            condoPicker.reloadAllComponents()
        }
    }

两张图片之间的效果不好。我想要交叉渐变效果我该怎么办？ 每个答案的答案。

Answer 1

如果我了解您的需求，您希望：

1. fadeOut()当前图片
2. 替换图片
3. 淡入

fadeOut()采用可选的完成功能;用它来替换图像并启动淡入。

 function displayNextImage() {
   x = (x === images.length - 1) ? 0 : x + 1;

   $(".body_image").fadeOut(300,
     function() {
       document.getElementById("img").src = images[x];
       $(".body_image").fadeIn(300);
     });
 }

 function displayPreviousImage() {
   x = (x <= 0) ? images.length - 1 : x - 1;

   $(".body_image").fadeOut(300,
     function() {
       document.getElementById("img").src = images[x];
       $(".body_image").fadeIn(300);
     });
 }

 function startTimer() {
   setInterval(displayNextImage, 3000);
 }

 var x = 0,
   images = [
     "//placehold.it/200/ff0000/000000",
     "//placehold.it/200/00ff00/000000",
     "//placehold.it/200/0000ff/000000",
     "//placehold.it/200/ffff00/000000",
     "//placehold.it/200/ffffff/000000",
     "//placehold.it/200/ff00ff/000000"
   ];

 startTimer()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="body_image">
  <img id=img src="//placehold.it/200/ff0000/000000" />
</div>

Answer 2

此代码在淡出前一张图像的同时淡化新图像。这是一个jsfiddle：

https://jsfiddle.net/fc7b1ktw/1/

代码：

var bcrypt = require("bcrypt-nodejs");

module.exports = function(sequelize, DataTypes) {

var User = sequelize.define('users', {
    annotation_id: {
        type: DataTypes.INTEGER,
        autoIncrement: true,
        primaryKey: true
    },
    firstName: {
        type: DataTypes.DATE,
        field: 'first_name'
    },
    lastName: {
        type: DataTypes.DATE,
        field: 'last_name'
    },
    email: DataTypes.STRING,
    password: DataTypes.STRING,

}, {
    freezeTableName: true
});

User.methods.generateHash = function(password) {
    return bcrypt.hashSync(password, bcrypt.genSaltSync(8), null);
};

User.methods.validPassword = function(password) {
    return bcrypt.compareSync(password, this.local.password);
};
    return User;
}