0

我想为列表中的图像添加淡入和淡出效果。每次我的鼠标在当前标签 div图像下方的标签 div 上时， 2 个按钮应该淡入，当我离开时它们应该淡出。我写了第一个标签 div的 JQuery 效果。如何使它适用于所有图像？我使用 php 5.5 和 heidsql。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php
session_start(); 
if(!isset($_SESSION['name']))
{
    die("To access this page, you need to <a href='index.php'>LOGIN</a>"); 
} 
 else  
    {  
    include('../conect.php');


                    error_reporting (E_ALL ^ E_NOTICE);
                    $allowedExts = array("jpg", "jpeg", "gif", "png");
                    $parts = explode('.', $_FILES["file"]["name"]);
                    $extension = end($parts);   
                    if ((($_FILES["file"]["type"] == "image/gif")|| ($_FILES["file"]["type"] == "image/jpeg")|| ($_FILES["file"]["type"] == "image/png")|| ($_FILES["file"]["type"] == "image/pjpeg"))&& ($_FILES["file"]["size"] < 1000000)&& in_array($extension, $allowedExts)){



                                if ($_FILES["file"]["error"] > 0){
                                    $mesaj= "Return Code: " . $_FILES["file"]["error"] . "<br />";
                                }

                                $nume= $_FILES["file"]["name"];

                                if (file_exists("../admin/upload/" . $_FILES["file"]["name"])){
                                    $mesaj= $_FILES["file"]["name"] . " already exists. ";

                                }

                                else{ 
                                      move_uploaded_file($_FILES["file"]["tmp_name"],
                                      "../admin/upload/" . $_FILES["file"]["name"]);
                                      $mesaj= "Stored in: " . "admin/upload/" . $_FILES["file"]["name"];

                                      mysql_query("INSERT INTO imagini (nume) VALUES ('$nume')"); 

                                    } 

                        } 



    }

 ?>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Lista imagini</title>
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" type="image/ico" href="images/favicon.gif" /> 
<link rel="stylesheet" href="/css/lightbox.css" type="text/css" media="screen" />
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Economica&subset=latin,latin-ext'type='text/css'>
<link rel="stylesheet" href="/css/megamenu.css"type="text/css" />
<link rel="stylesheet" href="/css/admin_tools.css" type="text/css" />



<script type="text/javascript" src="/javascript/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/javascript/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript" src="/javascript/jquery.smooth-scroll.min.js"></script>
<script type="text/javascript" src="/javascript/lightbox.js"></script>
<script type="text/javascript" src="/javascript/megamenu.js"> </script>
<script type="text/javascript" >

//initializare megamenu
    ddmegamenu.docinit({
        menuid:'solidmenu',
        dur:200 
    })
//initializare lightbox
jQuery(document).ready(function($) {
      $('a').smoothScroll({
        speed: 1000,
        easing: 'easeInOutCubic'
      });

      $('.showOlderChanges').on('click', function(e){
        $('.changelog .old').slideDown('slow');
        $(this).fadeOut();
        e.preventDefault();
      })


      $("#tag1").mouseenter(function(){  //add the fadein effect for the buttons of the first picture
            $("#Btag1").fadeIn();

        });
     $("#tag1").mouseleave(function(){  //add the fadeOut effect for the buttons of the first picture
            $("#Btag1").fadeOut();  
        });


  });

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-2196019-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })(); 




</script>
 </head>
 <body id="lista_imagini">
 <?php include('menu_admin_panel.php') ?>
<div id="lista_imagini_content">

        <div id="imagine">
            <form action="<?php $_PHP_SELF ?>" method="post" enctype="multipart/form-data">
            <label for="file">Poza</label><input type="file" name="file" /> 
            <input type="submit" value="Adauga imagine" class="buton_imagine" onchange="call" />
            </form>
        </div>      

        <div id="mesaj_eroare">
                <span>Lista Imagini</span>
        </div>

        <div class="imageRow">
            <div class="set">

                 <?php 
                    $result=mysql_query("SELECT * FROM imagini");
                    $result2=mysql_num_rows($result);
                    $i=1;
                    while($data=mysql_fetch_row($result)){ ?>
                                    <div id=<?php echo'"tag'.$i.'" '; ?> style="z-index:500;background-color:green;">
                                            <div class="single">


                                                    <a href="../admin/upload/<?php echo $data[1];?>"  rel="lightbox[plants]">  <img src= "../admin/upload/<?php echo $data[1];?>"   /></a>

                                                        <div id=<?php echo'"Btag'.$i.'" ';$i++; ?> style="display:none;">
                                                            <div id="buton_slide" >
                                                                <a href="delete.php?id_imagini=<?php echo $data[0];?>&nume_imagini=<?php echo $data[1]?>" class="buton">Sterge</a></td>
                                                            </div>

                                                            <div id="buton_slide2" >
                                                                <a href="imagine_noua.php?id_imagini=<?php echo $data[0];?>" class="buton">Editare</a></td>
                                                            </div>                              

                                                        </div>
                                            </div>      

                                    </div>

            <?php   } ?>          

            </div>
        </div>
</div>







 <?php mysql_close($con);?>
 </body>
 </html>
4

3 回答 3

1

尝试使用类而不是 ID。下面的示例代码。

$(".tagDiv").mouseenter(function(){  //add the fadein effect for the buttons of the first picture
            $(this).find(".BtagBtns").fadeIn();

        });


<div class="imageRow">
    <div class="set">

         <?php 
            $result=mysql_query("SELECT * FROM imagini");
            $result2=mysql_num_rows($result);
            $i=1;
            while($data=mysql_fetch_row($result)){ ?>
                            <div class="tagDiv" id=<?php echo'"tag'.$i.'" '; ?> style="z-index:500;background-color:green;">
                                    <div class="single">


                                            <a href="../admin/upload/<?php echo $data[1];?>"  rel="lightbox[plants]">  <img src= "../admin/upload/<?php echo $data[1];?>"   /></a>

                                                <div class="BtagBtns" id=<?php echo'"Btag'.$i.'" ';$i++; ?> style="display:none;">
                                                    <div id="buton_slide" >
                                                        <a href="delete.php?id_imagini=<?php echo $data[0];?>&nume_imagini=<?php echo $data[1]?>" class="buton">Sterge</a></td>
                                                    </div>

                                                    <div id="buton_slide2" >
                                                        <a href="imagine_noua.php?id_imagini=<?php echo $data[0];?>" class="buton">Editare</a></td>
                                                    </div>                              

                                                </div>
                                    </div>      

                            </div>

    <?php   } ?>          

    </div>
</div>
于 2013-01-17T09:40:19.217 回答
0

我没有检查你的整个代码，只是复制了 js 并做了一个非常简单的例子，它运行良好。你可以在这里看到它：http: //jsfiddle.net/RqKkz/

$(document).ready(function(){

  $("#hoverme").mouseenter(function(){  //add the fadein effect for the buttons of the first picture
    $(".button").fadeIn();
  });
  $("#hoverme").mouseleave(function(){  //add the fadeOut effect for the buttons of the first picture
    $(".button").fadeOut();  
  });
});

工作得很好。如果你想做类似的事情，你可以给图像一个类而不是一个 ID，让它适用于所有人。

于 2013-01-17T09:32:21.707 回答
-1

我遇到了同样的问题，但是当我改变时得到了解决 

$(function() {})

到

jQuery(document).ready(function($) {})
于 2014-01-17T11:01:32.087 回答