如何在 Wix 代码中悬停时淡化图像？

Question

Wix 中需要什么代码才能使图像在鼠标悬停在图像上时淡出视图并在鼠标未悬停在图像上时淡入视图？

我尝试使用此代码（以及其他类似代码）但它不起作用：

export function image4_mouseIn(event) {
  $w.onReady(function () {
   $w('#image4').onMouseIn( (Event) => {
    let fadeOptions = {
        "duration":   500,
        "delay":      500
    };

    $w("#image4").hide("fade", fadeOptions);
  } );
 });
}

export function image4_mouseOut(event) {
 $w.onReady(function () {
  $w('#image4').onMouseOut( (Event) => {
    let fadeOptions = {
        "duration":   500,
        "delay":      500
    };

    $w("#image4").show("fade", fadeOptions);
  } );
 }); 
}

Answer 1

你几乎做对了。在您的页面代码中，您应该具有以下内容：

$w.onReady(function () {
   let fadeOptions = {
        "duration":   500,
        "delay":      500
    };      
    $w('#image4').onMouseOut( (Event) => {
      $w('#image4').show('fade', fadeOptions);
    } );
    $w('#image4').onMouseIn( (Event) => {
      $w('#image4').hide('fade', fadeOptions);
    } );
 });

Answer 2

您的代码有几个问题：

1) 您正在同时创建动态和静态的事件处理程序。从技术上讲，您可以使用这两种方法，但不能同时使用。

动态执行（无需常规函数声明）：

$w.onReady(function () {
  $w('#image4').onMouseIn( (Event) => {
    let fadeOptions = {
      "duration":   500,
      "delay":      500
    };

    $w("#image4").hide("fade", fadeOptions);
  } );
  // show function here 
} );

静态执行（没有 onReady）

export function image4_mouseIn(event) {
  let fadeOptions = {
    "duration":   500,
    "delay":      500
  };
  $w("#image4").hide("fade", fadeOptions);
}

注意：您需要使用属性面板将此函数连接到按钮。

2) 您不能在隐藏的图像上运行 mouseOut 事件。为了解决这个问题，您可以在图像后面添加一个框（该框可以是透明的）并在再次显示图像的框上创建一个 mouseOut 事件处理程序。

export function box1_mouseOut(event) {
  let fadeOptions = {
    "duration":   500,
    "delay":      500
  };
  $w("#image4").show("fade", fadeOptions);
}

Answer 3

完美运行试试这个

$w.onReady(function () {
   let fadeOptions = {
        "duration":   500,
        "delay":      500
    };      
    $w('#image4').onMouseOut( (Event) => {
      $w('#image4').show('fade', fadeOptions);
    } );
    $w('#image4').onMouseIn( (Event) => {
      $w('#image4').hide('fade', fadeOptions);
    } );
 });

如何在 Wix 代码中悬停时淡化图像？

How to fade an image on hover in Wix code?

javascript

velo